冲突修改3

src/components/hs-empty/hs-empty.vue

+<template>
+	<view class="shopro-empty-wrap u-flex-col u-row-center u-col-center" :style="{ 'margin-top': marginTop }">
+		<!-- <image class="empty-img" :src="image" mode="aspectFill"></image> -->
+		<view class="empty-text u-tips-color u-font-26">{{ tipText }}</view>
+		<view class="btn-box u-m-t-100" v-if="btnText">
+			<button class="u-reset-button empty-btn" :style="customStyle" hover-class="none" @tap="onBtn">{{ btnText }}</button>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * Empty- 数据为空页
+ * @property {String} image - 空白图。
+ * @property {String} tipText - 提示语。
+ * @property {String} btnText - 按钮文字。
+ * @property {String} marginTop - 距离父级距离。
+ * @property {Object} customStyle - 自定义按钮样式。
+ * @event {Fuction} click - 点击按钮
+ */
+export default {
+	name: 'shoproEmpty',
+	props: {
+		image: {
+			type: [String,null],
+			default: ''
+		},
+		tipText: {
+			type: String,
+			default: ''
+		},
+		btnText: {
+			type: String,
+			default: ''
+		},
+		marginTop: {
+			type: String,
+			default: '300rpx'
+		},
+		customStyle: {
+			type: Object,
+			default: () => {
+				return {
+					width: '200rpx',
+					height: '70rpx',
+					background: 'linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1))',
+					borderRradius: '35rpx',
+					fontSize: '28rpx',
+					color: '#fff',
+					border: 0
+				};
+			}
+		}
+	},
+	methods: {
+		onBtn() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.empty-img {
+	width: 540rpx;
+	height: 290rpx;
+}
+.empty-btn {
+	width: 320rpx;
+	height: 70rpx;
+	line-height: 70rpx;
+	background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
+	border-radius: 35rpx;
+	font-size: 28rpx;
+	color: rgba(#fff, 0.9);
+}
+</style>

src/config/request/apiList/mdm/config/index.js

+export default {
+    baseUrl: '/gdep-mdm'
+}

src/config/request/apiList/mdm/index.js

+
+import materialinfo from './materialinfo/index'
+export default {
+    ...materialinfo,
+}

src/config/request/apiList/mdm/materialinfo/index.js

+// 物料面料
+import config from "../config/index";
+
+let baseUrl = `${config.baseUrl}/materialinfo`
+export default {
+    'materialinfo':{
+        'getMaterialList': {
+            url: `${baseUrl}/getMaterialList`,
+            method: 'post'
+        },
+        'getMaterialById':{
+            url: `${baseUrl}/getMaterialById`,
+            method: 'get'
+        }
+    }
+}

src/config/request/apiList/plm/config/index.js

+export default {
+    baseUrl: '/gdep-plm'
+}

src/config/request/apiList/plm/index.js

+
+import stylelibraryorder from './stylelibraryorder/index'
+import modelingtask from './modelingtask'
+export default {
+    ...stylelibraryorder,
+    ...modelingtask
+}

src/config/request/apiList/plm/modelingtask/index.js

+import config from "../config/index";
+let className = 'modelingtask'
+let baseUrl = `${config.baseUrl}/${className}`
+export default {
+    [className]:{
+        'selectModelingTaskPage': {
+            url: `${baseUrl}/selectModelingTaskPage`,
+            method: "get",
+        }
+    }
+}

src/config/request/apiList/plm/stylelibraryorder/index.js

+import config from "../config/index";
+let className = 'stylelibraryorder'
+let baseUrl = `${config.baseUrl}/${className}`
+export default {
+    [className]:{
+        'page': {
+            url: `${baseUrl}/page`,
+            method: 'post'
+        },
+        'details':{
+            url: `${baseUrl}/details`,
+            method: 'get'
+        }
+    }
+}

src/config/request/apis.js

@@ -13,7 +13,9 @@ import modelingTaskCategory from './apiList/modelingTaskCategory.js'
 import materialLabel from './apiList/materialLabel.js'
 // 颜色库接口
 import modelingTaskColorLibrary from './apiList/modelingTaskColorLibrary'
-import plm from './apiList/plm.js'
+
+import plm from './apiList/plm'
+import mdm from './apiList/mdm'
 
 export default {
 	...user,
@@ -24,5 +26,6 @@ export default {
 	...plm,
 	...modelingTaskCategory,
 	...materialLabel,
-	...modelingTaskColorLibrary
+	...modelingTaskColorLibrary,
+	...mdm
 };

src/manifest.json

@@ -134,9 +134,9 @@
                     //					"target" : "http://47.96.138.212:8321",
                     //                    "target" : "http://10.10.10.242/",
 //                    "target" : "http://10.10.10.31/",
-                    //                     "target" : "http://10.10.10.218/",
+                                         "target" : "http://10.10.10.118/",
                     //                    "target" : "http://10.10.10.132/",
-                                        "target" : "http://octopus-dev.textile-saas.huansi.net/dev-api/",
+//                                        "target" : "http://octopus-dev.textile-saas.huansi.net/dev-api/",
                     "changeOrigin" : true,
                     "pathRewrite" : {
                         "^/dev" : ""

src/pages.json

@@ -187,15 +187,104 @@
     },
 
 		{
-      "path": "pages/designCommissioned/splitItem",
+			"path": "pages/user/register/stepSelectType",
+			"style": {
+				"navigationBarTitleText": "完善信息",
+//				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		},
+		{
+			"path": "pages/user/register/perfectInformation",
+			"style": {
+				"navigationBarTitleText": "完善信息",
+//				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		},
+		{
+			"path": "pages/user/register/success",
+			"style": {
+				"navigationBarTitleText": "完善信息",
+//				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"mp-alipay": {
+					"transparentTitle": "always",
+					"titlePenetrate": "YES",
+					"allowsBounceVertical": "NO"
+				}
+			}
+		},
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "首页",
+				"enablePullDownRefresh": false
+			}
+
+		},
+
+		{
+			"path": "pages/designCommissioned/listSelectToAdd",
+			"style": {
+				"navigationBarTitleText": "选择面料新增内容",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		},
+		{
+			"path": "pages/designCommissioned/list",
+			"style": {
+				"navigationBarTitleText": "款式委托选款列表",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		},
+		{
+			"path": "pages/designCommissioned/addItem",
 			"style": {
 				"navigationBarTitleText": "完善信息",
 				"navigationBarTextStyle": "white",
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
+
 		},
 		{
+			"path": "pages/designCommissioned/item",
+			"style": {
+				"navigationBarTitleText": "委托详情",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		},
+
+		 {
+			"path": "pages/designCommissioned/splitItem",
+			"style": {
+				"navigationBarTitleText": "完善信息",
+				"navigationBarTextStyle": "white",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
 			"path": "pages/home/index",
 			"style": {
 				"navigationBarTitleText": "首页",
@@ -208,8 +297,7 @@
 					"allowsBounceVertical": "NO"
 				}
 			}
-    },
-    {
+		}, {
 			"path": "pages/home/search",
 			"style": {
 				"navigationBarTitleText": "搜索",
@@ -377,20 +465,6 @@
 				}
 			}
 		},
-    // {
-    //   "path": "pages/modeling/imgList",
-    //   "style": {
-    //     "navigationBarTitleText": "指定面料颜色模型",
-    //     "navigationBarTextStyle": "white",
-    //     "enablePullDownRefresh": false,
-    //     "navigationStyle": "custom",
-    //     "mp-alipay": {
-    //       "transparentTitle": "always",
-    //       "titlePenetrate": "YES",
-    //       "allowsBounceVertical": "NO"
-    //     }
-    //   }
-    // },
 		{
 			"path": "pages/modeling/tags",
 			"style": {

src/pages/fabricModeling/modelingOrder.vue

@@ -277,7 +277,7 @@ export default {
 			this.loadStatus = 'loading';
 			let { materialName, current, size } = this.pages;
 			this.$http(
-				'plm.selectModelingTaskPage',
+				'modelingtask.selectModelingTaskPage',
 				{
 					materialName: materialName ? materialName : null,
 					status: this.status,

src/pages/material/createMaterial.vue

@@ -11,9 +11,12 @@
     <view class="body " :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
       <view class="u-relative">
         <u-image height="750rpx"></u-image>
+        <view v-if="!isEdit">
           <view class="u-absolute prev">上一款</view>
           <view class="u-absolute next">下一款</view>
-        <view class="u-absolute step u-p-r-30 u-p-l-30">
+        </view>
+        <view v-if="isEdit"
+            class="u-absolute step u-p-r-30 u-p-l-30">
           <view class="step-main u-p-r-20 u-p-l-20 u-flex">
             <text class="width_100">{{angle}}°</text>
             <view class="u-relative u-flex-1">
@@ -66,7 +69,7 @@
           </view>
           <view class="u-p-t-30 u-p-b-20 text-right">
             <view class="button inline-block button-plain button-plain-default">取消</view>
-            <view class="button inline-block button-default">主身</view>
+            <view class="button inline-block button-default">确定</view>
           </view>
         </view>
         <view class="bg-fff u-p-r-30 u-p-l-30">
@@ -146,6 +149,8 @@ export default {
       lineStepWidth: 0,
       lineWidth: 0,
       lineOffset: 0,
+
+      isEdit: false,
     }
   },
   computed:{
@@ -168,7 +173,24 @@ export default {
       this.lineStepWidth = res.width;
     })
   },
+  created() {
+    let {id,materialId} = this.$Route.query;
+    this.getItem(id);
+    this.getMaterialItem(materialId);
+  },
   methods:{
+    getItem(id){
+      this.$http("stylelibraryorder.details", id)
+        .then(res =>{
+
+        })
+    },
+    getMaterialItem(id){
+      this.$http("materialinfo.getMaterialById", id)
+          .then(res =>{
+
+          })
+    },
 
     touchMove(e){
       let left =  e.changedTouches[0].pageX;
@@ -234,6 +256,7 @@ export default {
     top: 50%;
     margin-top: -20rpx;
     background: #fff;
+    margin-left: -20rpx;
   }
 }
 

src/pages/material/list.vue

@@ -13,14 +13,14 @@
       <view class="title u-p-30">选择面料</view>
       <view class="u-p-30 bg-fff">
         <!--新增委托navbar-->
-        <u-search placeholder="请输入面料名称" v-model="keyword"
+        <u-search placeholder="请输入面料名称" v-model="keyword" @search="search"
                   border-color="#e1e1e1" height="76"
                   bg-color="#fff" :show-action="false"></u-search>
       </view>
     </view>
     <!-- 列表 确定-->
     <view class="u-p-30 body" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
-      <view v-for="(item, index) in list" :key="item.id" class="u-flex u-m-b-20">
+      <view v-for="(item, index) in computedList" :key="item.id" class="u-flex u-m-b-20">
         <view class="u-m-r-30">
           <u-icon :name="index === selectedIndex ? 'checkmark-circle-fill': 'checkmark-circle'"
                   color="#000" size="40"
@@ -29,7 +29,13 @@
         </view>
         <hs-material-thumbnail :item="item"></hs-material-thumbnail>
       </view>
+      <!-- 加载更多 -->
+      <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
+      <!-- 缺省页 -->
+      <hs-empty  v-if="isEmpty" tipText="没有数据"></hs-empty>
     </view>
+
+
     <!-- 底部按钮 确定-->
     <view class="footer" id="footer">
       <view class="footer-btn">
@@ -55,48 +61,61 @@ export default {
     return {
       keyword: '',
       selectedIndex: -1,
-      list: [
-        {
-          materialName: '加厚荷兰绒绒布布料',
-
-          id: 2
-        },
-        {
-          materialName: '加厚荷兰绒绒布布料加厚荷兰绒绒布布料',
-          id: 12
+      pageOptions: {
+        current: 1,
+        size: 10,
       },
-        {
-          materialName: '加厚荷兰绒绒布布料',
-          id: 221
-        },
-        {
-          materialName: '加厚荷兰绒绒布布料',
-          id: 22
-        },
-        {
-          materialName: '加厚荷兰绒绒布布料',
-          id: 224
+      loadStatus: 'loadmore',
+      list: []
+    }
   },
-        {
-          materialName: '加厚荷兰绒绒布布料',
-          id: 222
+  computed:{
+    computedList(){
+      return this.list.map((item) => {
+        return {
+          ...item,
+          materialCategory: item.category,
+          materialDoorWidth: item.fabricWidth,
+          materialElement: item.saoriStandard,
         }
-      ]
+      })
+    },
+    isEmpty(){
+      return this.list.length === 0
     }
   },
   onLoad(){
-
+    this.getList();
   },
   methods:{
+    // 触底加载更多
+    onReachBottom() {
+      if (this.pageOptions.current < this.pageOptions.pages) {
+        this.pageOptions.current += 1;
+        this.getData();
+      }
+    },
+    search(){
+      this.pageOptions = {
+        current: 1,
+        size: 10,
+      }
+      this.getList();
+    },
     getList(){
-      this.$http('orderTicket.materialList', {
-        size: 4,
-        materialCode: '',
-        materialName: ''
+      this.loadStatus = 'loading';
+      this.$http('materialinfo.getMaterialList', {
+        "codeAndName": this.keyword,
+        "isDisabled": false,
+        "materialCode": "",
+        "materialType": "面料",
+        ...this.pageOptions
       }).then(res => {
         let { code, data } = res;
         if (code == 200) {
-          this.list = data.data;
+          this.list = data.page.records;
+          this.pageOptions.pages = data.page.total;
+          this.loadStatus = this.list.length  < data.page.total ? 'loadmore' : 'nomore';
         }
       });
     },

src/pages/material/selectType.vue

@@ -11,22 +11,33 @@
         <u-icon size="24" color="#000" name="arrow-right" class="u-m-r-10 u-m-l-10"></u-icon>
         <text>选择款式</text>
       </view>
-      <view class="u-p-30 bg-fff">
+      <view class="u-p-30 bg-fff u-flex">
         <!--新增委托navbar-->
+        <view class="u-flex-1">
           <u-search placeholder="请输入面料名称" v-model="keyword"
                     border-color="#e1e1e1" height="76"
                     bg-color="#fff" :show-action="false"></u-search>
         </view>
+        <image src="@/static/images/search/filter.png" class="filter"
+               @click="popupShow = true"
+               mode="widthFix"></image>
+      </view>
     </view>
     <!-- 列表 确定-->
     <view class="body bg-fff u-p-r-30 u-p-b-30 u-p-l-30" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
       <view v-for="(item, index) in list" :key="item.id"
-            @click=""
+            @click="$Router.push({
+              path: '/pages/material/createMaterial',
+              query:{
+                materialId: $Route.query.materialId,
+                id: item.id
+              }
+            })"
             class="u-flex u-m-b-20">
         <view class="item item--round u-flex ">
           <view class="item-img u-relative">
-            <image src="" mode="fit" style="width:100%; height: 100%"></image>
-            <u-image width="100rpx" height="100rpx"
+            <image :src="`${$IMG_URL}${item.effectPictureCode}`" mode="fit" style="width:100%; height: 100%"></image>
+            <u-image width="100rpx" height="100rpx" v-if="item.putawayStatus === 1"
                      class="item--status"
                      mode="widthFix"
                      src="@/static/images/material/status.png">
@@ -34,19 +45,63 @@
           </view>
           <view class="u-flex-1 u-p-l-20 u-p-r-30 u-border-left">
             <view class="item-title u-flex ">
-              <view class="u-flex-1 u-line-1 u-font-32 u-p-t-20 u-p-b-8">男装</view>
+              <view class="u-flex-1 u-line-1 u-font-32 u-p-t-20 u-p-b-8">{{item.category}}</view>
               <u-icon size="24" color="#000" name="arrow-right"></u-icon>
             </view>
-            <view class="item-desc u-font-24">ASD</view>
+            <view class="item-desc u-font-24">{{ item.styleCode }}</view>
             <view class="item-tags u-p-b-24">
-              <view class="item-tag u-font-20">
-                标签
+              <view class="item-tag u-font-20"
+                    :key="tag.id"
+                    v-for="tag in item.styleLibraryTagVOList">
+                {{ tag.materialTagName }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 加载更多 -->
+      <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
+      <!-- 缺省页 -->
+      <hs-empty  v-if="isEmpty" tipText="没有数据"></hs-empty>
+    </view>
+    <u-popup v-model="popupShow" mode="bottom" height="100%">
+      <view class="u-relative">
+        <!--选款-->
+        <view class="position-sticky">
+          <u-navbar title="按照面料标签筛选" :is-fixed="false"
+                    :border-bottom="false" :custom-back="() =>{ popupShow = false;}"
+                    :background="{backgroundColor: 'whitesmoke'}">
+          </u-navbar>
+          <view class="bg-fff u-p-30">
+            <u-search placeholder="请输入面料标签名称" v-model="tagKeyword"
+                      border-color="#e1e1e1" height="76"
+                      bg-color="#fff" :show-action="false"></u-search>
+          </view>
         </view>
+
+        <view class="tags u-p-l-30 u-p-r-30">
+          <view class="tag u-line-1" @click="triggerClickTag(tag)"
+                v-for="(tag) in computedMaterialLabelList"
+                :class="[tagIds.indexOf(tag.materialLabelId) > -1 ? 'active': '']">
+            {{tag.labelName}}
           </view>
         </view>
+        <view class="footer">
+          <view class="footer-btn ">
+            <view class="u-flex">
+              <view class="u-line-1 ">
+                已选择：<text class="active-color">{{tagIds.length}} 条数据</text>
               </view>
+              <view class="u-flex-1 text-right">
+                <view class="button inline-block" @click="tagIds = []">重置</view>
+                <view class="button button-default inline-block u-m-l-20" @click="popupConfirm">确定</view>
               </view>
             </view>
+
+          </view>
+        </view>
+      </view>
+    </u-popup>
   </view>
 </template>
 
@@ -60,40 +115,103 @@ export default {
     return {
       keyword: '',
       selectedIndex: -1,
-      list: [
-        {
-          materialName: '加厚荷兰绒绒布布料',
+      pageOptions: {
+        current: 1,
+        size: 10,
+      },
+      list: [],
 
-          id: 2
+      popupShow: false,
+      tagKeyword: '',
+      tagIds: [],
+
+      materialLabelList: [],
+    }
   },
-        {
-          materialName: '加厚荷兰绒绒布布料加厚荷兰绒绒布布料',
-          id: 12
+  onLoad(){
+    this.labelListTo();
+    this.getList();
+
   },
-        {
-          materialName: '加厚荷兰绒绒布布料',
-          id: 221
+  computed:{
+    isEmpty(){
+      return this.list.length === 0
     },
-        {
-          materialName: '加厚荷兰绒绒布布料',
-          id: 22
+    computedMaterialLabelList(){
+      return this.materialLabelList.filter((item) => {
+        return item.labelName.indexOf(this.tagKeyword) > -1
+      })
+    }
   },
-        {
-          materialName: '加厚荷兰绒绒布布料',
-          id: 224
+  methods:{
+    popupConfirm(){
+      this.getList(this.tagIds);
+      this.popupShow = false;
     },
-        {
-          materialName: '加厚荷兰绒绒布布料',
-          id: 222
+    triggerClickTag({materialLabelId}){
+      let index = this.tagIds.indexOf(materialLabelId)
+      if(index > -1){
+        this.tagIds.splice(index,1)
+      }else{
+        this.tagIds.push(materialLabelId)
       }
-      ]
+    },
+    // 触底加载更多
+    onReachBottom() {
+      if (this.pageOptions.current < this.pageOptions.pages) {
+        this.pageOptions.current += 1;
+        this.getData();
       }
     },
-  onLoad(){
-
+    search(){
+      this.pageOptions = {
+        current: 1,
+        size: 10,
+      }
+      this.getList();
+    },
+    getList(materialTagIdList = []){
+      this.loadStatus = 'loading';
+      this.$http('stylelibraryorder.page', {
+        styleTag: this.keyword,
+        materialTagIdList,
+        ...this.pageOptions
+      }).then(res => {
+        let { code, data } = res;
+        if (code === 200) {
+          if(Object.keys(data).length > 0){
+            this.list = data.records;
+            this.pageOptions.pages = data.total;
+            this.loadStatus = this.list.length  < data.total ? 'loadmore' : 'nomore';
+          }else{
+            this.list = []
+            this.loadStatus = 'nomore';
+          }
+        }
+      });
+    },
+    // 获取标签
+    labelListTo(){
+      this.$http("materialLabel.list",{
+        isDeleted: 0
+      }).then(res =>{
+        let {
+          code, data
+        } = res;
+        if(
+            code === 200
+        ){
+          this.materialLabelList = data.platformLabel.map(($item) => {
+            let { id, ...item} = $item;
+            return {
+              ...item,
+              materialLabelId: id
+            }
+          });
+          // console.log(this.materialLabelList)
+        }
+      })
     },
-  methods:{
-
   }
 }
 </script>
@@ -102,6 +220,49 @@ export default {
 $h-color: #AF8D66;
 $color: rgba(175,141,102,0.10);
 $main-color: #fff;
+
+.active-color{
+  color: #d4aa79;
+}
+.inline-block{
+  display: inline-block;
+}
+.position-sticky{
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+}
+.tags{
+  display: grid;
+  grid-gap: 20rpx;
+  grid-template-columns: 1fr 1fr 1fr;
+  .tag{
+    line-height: 80rpx;
+    text-align: center;
+    border-radius: 6rpx;
+    position: relative;
+    background: #f4f4f4;
+    color: #666666;
+    &.active{
+      color: #d4aa79;
+      background: #f7ede4;
+      &::after{
+        content: ' ';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 42rpx;
+        height: 32rpx;
+        background: url("@/static/images/search/checked.png");
+      }
+    }
+  }
+}
+.filter{
+  margin-left: 36rpx;
+  width: 42rpx;
+  height: 48rpx;
+}
 .body{
   position: absolute;
   width: 100%;
@@ -139,6 +300,23 @@ $main-color: #fff;
   }
 }
 
+.button{
+  border: 1px solid #333;
+  border-radius: 44rpx;
+  width: 160rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  text-align: center;
+  &-plain{
+    &--default{
+      color: #333;
+    }
+  }
+  &-default{
+    background: #333;
+    color: #fff;
+  }
+}
 .item{
   width: 100%;
 

src/pages/modeling/addItem.vue

@@ -201,7 +201,7 @@
 
 <script>
 import dom from "../../mixins/dom";
-import permission from "../../js_sdk/wa-permission/permission";
+// import permission from "../../js_sdk/wa-permission/permission";
 export default {
   name: "addItem",
   mixins: [dom],