选择分类的优化

ghsApp/src/admin/item/add.vue

@@ -53,11 +53,13 @@
 
         <tui-list-cell class="line-cell" :arrow="true">
           <div class="tui-title">分类</div>
-          <picker mode="selector" :value="form.classId" :range="itemClassData" range-key="name" @change="changeItemClassFn" class="tui-input" >
-            <input v-model="form.classId" name="classId" type="text" hidden />
-            <div v-if="form.classId" style="height:45upx;" >{{ itemClassSelectedData.name }}</div>
-            <div class="tui-placeholder" style="height:45upx;" v-else>请选择</div>
-          </picker>
+          <input v-model="form.classId" name="classId" type="text" hidden />
+          <view style="color:#CCCCCC;width:450upx;height:45upx;" @click.stop="changeClass()" v-if="form.classId == 0">
+            请选择分类
+          </view>
+          <view @click.stop="changeClass()" style="width:450upx;height:45upx;" v-else>
+            {{form.className}}
+          </view>
         </tui-list-cell>
 
         <tui-list-cell class="line-cell" :hover="false">
@@ -167,6 +169,17 @@
       </view>
 
     </form>
+
+    <uni-popup ref="classRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
+      <view style="margin-left:30upx;margin-top:19upx;font-size:27upx;font-weight:bold;">请选择分类：</view>
+        <view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
+          <view v-for="(item, index) in itemClassData" :key="index" @tap.stop="setThisClass(item)" style="margin-bottom:20upx;margin-left:3upx;">
+          <image :src="item.cover" style="width:120upx;height:120upx;border-radius:10upx;"></image>
+          <view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;">{{item.name}}</view>
+        </view>
+      </view>
+    </uni-popup>
+
   </div>
 </template>
 
@@ -199,6 +212,7 @@ export default {
         bigUnitId:1,
         smallUnitId:2,
         classId:'',
+        className:'',
         price:'',
         skPrice:'',
         hjPrice:'',
@@ -238,9 +252,16 @@ export default {
     const token = uni.getStorageSync('token')
     this.headers.token = token
   },
-  watch:{
-  },
   methods: {
+    changeClass(item){
+      this.$refs.classRef.open('center')
+    },
+    setThisClass(info){
+      this.$refs.classRef.close()
+      this.form.classId = info.id ? info.id : 0
+      this.form.className = info.name ? info.name : ''
+      this.$forceUpdate()
+    },
     tjLinkage(){
       if(this.form.discountPrice && Number(this.form.discountPrice)>0){
 				let skMore = this.form.skMore ? Number(this.form.skMore) : 0

ghsApp/src/admin/item/copy.vue

@@ -53,11 +53,13 @@
 
         <tui-list-cell class="line-cell" :arrow="true">
           <view class="tui-title">分类</view>
-          <picker mode="selector" :value="form.classId" :range="itemClassData" range-key="name" @change="changeItemClassFn" class="tui-input" >
-            <input v-model="form.classId" name="classId" type="text" hidden />
-            <view v-if="form.classId" style="height:45upx;" >{{ itemClassSelectedData.name }}</view>
-            <view class="tui-placeholder" style="height:45upx;" v-else>请选择</view>
-          </picker>
+          <input v-model="form.classId" name="classId" type="text" hidden />
+          <view style="color:#CCCCCC;width:450upx;height:45upx;" @click.stop="changeClass()" v-if="form.classId == 0">
+            请选择分类
+          </view>
+          <view @click.stop="changeClass()" style="width:450upx;height:45upx;" v-else>
+            {{form.className}}
+          </view>
         </tui-list-cell>
 
         <tui-list-cell class="line-cell" :hover="false">
@@ -167,6 +169,17 @@
       </view>
 
     </form>
+
+    <uni-popup ref="classRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
+      <view style="margin-left:30upx;margin-top:19upx;font-size:27upx;font-weight:bold;">请选择分类：</view>
+        <view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
+          <view v-for="(item, index) in itemClassData" :key="index" @tap.stop="setThisClass(item)" style="margin-bottom:20upx;margin-left:3upx;">
+          <image :src="item.cover" style="width:120upx;height:120upx;border-radius:10upx;"></image>
+          <view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;">{{item.name}}</view>
+        </view>
+      </view>
+    </uni-popup>
+
   </view>
 </template>
 
@@ -199,6 +212,7 @@ export default {
         bigUnitId:1,
         smallUnitId:2,
         classId:'',
+        className:'',
         price:'',
         skPrice:'',
         hjPrice:'',
@@ -218,7 +232,6 @@ export default {
         smallRatio:1,
         ratioType:0
       },
-      itemClassSelectedData:{},
       itemClassData:[],
       unitData:[],
       smallUnitSelectedData:{},
@@ -238,9 +251,16 @@ export default {
     const token = uni.getStorageSync('token')
     this.headers.token = token
   },
-  watch:{
-  },
   methods: {
+    changeClass(item){
+      this.$refs.classRef.open('center')
+    },
+    setThisClass(info){
+      this.$refs.classRef.close()
+      this.form.classId = info.id ? info.id : 0
+      this.form.className = info.name ? info.name : ''
+      this.$forceUpdate()
+    },
     tjLinkage(){
       if(this.form.discountPrice && Number(this.form.discountPrice)>0){
 				let skMore = this.form.skMore ? Number(this.form.skMore) : 0
@@ -351,11 +371,6 @@ export default {
       this.smallUnitSelectedData = this.unitData[e.detail.value];
       this.form.smallUnitId = this.smallUnitSelectedData.id;
     },
-    changeItemClassFn(e) {
-        this.itemClassSelectedData = this.itemClassData[e.detail.value];
-        this.form.classId = this.itemClassSelectedData.id;
-    },
-    //从平台选择花材 shish 20210826
     getPtItemInfo(ptItemId){
       getPtItemDetail({id:ptItemId}).then(res=>{
 
@@ -399,9 +414,11 @@ export default {
         this.form.price = res.data.prePrice
         this.form.stock = 0
 
-        this.itemClassSelectedData = this.itemClassData.filter(
+        let currentClass = this.itemClassData.filter(
           e => this.form.classId == e.id
         )[0];
+        this.form.className = currentClass.name ? currentClass.name : ''
+
         this.smallUnitSelectedData = this.unitData.filter(
           e => this.form.smallUnitId == e.id
         )[0];

ghsApp/src/admin/item/detail.vue

@@ -87,11 +87,13 @@
 
         <tui-list-cell class="line-cell" :arrow="true">
           <view class="tui-title">分类</view>
-          <picker mode="selector" :value="form.classId" :range="itemClassData" range-key="name" @change="changeItemClassFn" class="tui-input" >
-            <input v-model="form.classId" name="classId" type="text" hidden />
-            <view v-if="form.classId" style="height:45upx;" >{{ itemClassSelectedData.name }}</view>
-            <view class="tui-placeholder" style="height:45upx;" v-else>请选择</view>
-          </picker>
+          <input v-model="form.classId" name="classId" type="text" hidden />
+          <view style="color:#CCCCCC;width:450upx;height:45upx;" @click.stop="changeClass()" v-if="form.classId == 0">
+            请选择分类
+          </view>
+          <view @click.stop="changeClass()" style="width:450upx;height:45upx;" v-else>
+            {{form.className}}
+          </view>
         </tui-list-cell>
 
         <tui-list-cell class="line-cell" :hover="false">
@@ -252,6 +254,16 @@
 		</template>
 		</modal-module>
 
+    <uni-popup ref="classRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
+      <view style="margin-left:30upx;margin-top:19upx;font-size:27upx;font-weight:bold;">请选择分类：</view>
+        <view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
+          <view v-for="(item, index) in itemClassData" :key="index" @tap.stop="setThisClass(item)" style="margin-bottom:20upx;margin-left:3upx;">
+          <image :src="item.cover" style="width:120upx;height:120upx;border-radius:10upx;"></image>
+          <view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;">{{item.name}}</view>
+        </view>
+      </view>
+    </uni-popup>
+
   </view>
 </template>
 
@@ -290,6 +302,7 @@ export default {
         bigUnitId:1,
         smallUnitId:2,
         classId:'',
+        className:'',
         price:'',
         skPrice:'',
         hjPrice:'',
@@ -313,7 +326,6 @@ export default {
         ratioType:0,
         inTurn:100
       },
-      itemClassSelectedData:{},
       itemClassData:[],
       unitData:[],
       smallUnitSelectedData:{},
@@ -356,6 +368,15 @@ export default {
     }
   },
   methods: {
+    changeClass(item){
+      this.$refs.classRef.open('center')
+    },
+    setThisClass(info){
+      this.$refs.classRef.close()
+      this.form.classId = info.id ? info.id : 0
+      this.form.className = info.name ? info.name : ''
+      this.$forceUpdate()
+    },
     showChangeOnStock(item){
       let that = this
       that.$util.confirmModal({content:'了解修改后的影响，确认要修改?'},() => {
@@ -580,11 +601,6 @@ export default {
       this.smallUnitSelectedData = this.unitData[e.detail.value];
       this.form.smallUnitId = this.smallUnitSelectedData.id;
     },
-    changeItemClassFn(e) {
-        this.itemClassSelectedData = this.itemClassData[e.detail.value];
-        this.form.classId = this.itemClassSelectedData.id;
-    },
-    //从平台选择花材 shish 20210826
     getPtItemInfo(ptItemId){
       getPtItemDetail({id:ptItemId}).then(res=>{
 
@@ -632,9 +648,11 @@ export default {
 
         this.form.price = res.data.prePrice
 
-        this.itemClassSelectedData = this.itemClassData.filter(
+        let currentClass = this.itemClassData.filter(
           e => this.form.classId == e.id
         )[0];
+        this.form.className = currentClass.name ? currentClass.name : ''
+
         this.smallUnitSelectedData = this.unitData.filter(
           e => this.form.smallUnitId == e.id
         )[0];
@@ -642,8 +660,7 @@ export default {
           e => this.form.bigUnitId == e.id
         )[0];
         this.productData = res.data
-        this.cost = res.data.cost || 0
-
+        this.cost = res.data.cost ? res.data.cost : 0
       });
     },
     imgUploadSuccess(res) {

ghsApp/src/admin/ptItem/itemList.vue

@@ -3,10 +3,10 @@
 	<view class="billing_box_bg">
     	<view class="input-wrap" style="position: fixed;z-index:99999;background-color: white;width:100%;">
 			<view class="search-bar">
-				<app-search-module v-model="py" placeholder="搜索要找的花材" @input="searchFnContrapose"/>
+				<app-search-module v-model="py" placeholder="搜索可用的花材" @input="searchFnContrapose"/>
 			</view>
 			<view style="padding:0 0upx 0 20upx;" >
-				<button class="admin-button-com middle blue" @click="pageTo({ url: '/admin/item/add',type:2 })">添加新品种</button>
+				<button class="admin-button-com middle blue" @click="pageTo({ url: '/admin/item/add',type:2 })">创建新花材</button>
 			</view>
 		</view>
 		<view style="position:fixed;z-index:99999;text-align:center;top:100upx;background-color:white;width:100%;height:60upx;font-size:26upx;">