shenzeeUniApp/packageA/pages/remote/flowerShow.vue

<template>
	<view>
		<view class="search">
			<view class="search-title">
				{{$t('dosugar.equipmentClientID')}}
			</view>
			<view class="search-input">
				<input type="text" :placeholder="$t('dosugar.placeholder')" v-model="searchClientId" />
			</view>
			<view class="search-button">
				<button type="primary" size="mini" class="" @click="search()">
					<p class="">{{$t('dosugar.search')}}</P>
				</button>
			</view>
		</view>
		<view class="td-right">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						{{$t('dosugar.chooseEquipment')}}
					</view>
					<view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
						<picker @change="changeEquipment" :value="index" :range="equipmentNameList">
							<view class="uni-input">{{equipmentNameList[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="product" v-if="productList.length>0">
			<P style='color:#0A98D5;' class="productName">{{$t('flowers.buleSugar')}}</P>
			<radio-group name="蓝">
				<label>
					<radio @click="changeShowList('blue-0')" value="0" /><text>{{$t('flowers.show')}}</text>
				</label>
				<label>
					<radio @click="changeShowList('blue-1')" value="1" /><text>{{$t('flowers.unshow')}}</text>
				</label>
			</radio-group>
		</view>
		<view class="product" v-if="productList.length>0">
			<P style='color:#F4AE1B;' class="productName">{{$t('flowers.yellowSugar')}}</P>
			<radio-group name="黄">
				<label>
					<radio @click="changeShowList('yellow-0')" value="0" /><text>{{$t('flowers.show')}}</text>
				</label>
				<label>
					<radio @click="changeShowList('yellow-1')" value="1" /><text>{{$t('flowers.unshow')}}</text>
				</label>
			</radio-group>
		</view>
		<view class="product" v-if="productList.length>0">
			<P style='color:#FF3333;' class="productName">{{$t('flowers.redSugar')}}</P>
			<radio-group name="红">
				<label>
					<radio @click="changeShowList('red-0')" value="0" /><text>{{$t('flowers.show')}}</text>
				</label>
				<label>
					<radio @click="changeShowList('red-1')" value="1" /><text>{{$t('flowers.unshow')}}</text>
				</label>
			</radio-group>
		</view>
		<view class="product" v-if="productList.length>0">
			<P class="productName">{{$t('flowers.whileSugar')}}</P>
			<radio-group name="白">
				<label>
					<radio @click="changeShowList('white-0')" value="0" /><text>{{$t('flowers.show')}}</text>
				</label>
				<label>
					<radio @click="changeShowList('white-1')" value="1" /><text>{{$t('flowers.unshow')}}</text>
				</label>
			</radio-group>
		</view>
		<view class="line"></view>
		<view class="product" v-for="(item,index) in products" :key="index">

			<P class="productName">{{$t('flowers.flower')}}：{{item.productName}} </P>
			<radio-group :name="item.productName">
				<label>
					<radio @click="changeShow(item.productName+'-0')" value="0"
						:checked='item.showType==null || item.showType==0' /><text>{{$t('flowers.show')}}</text>
				</label>
				<label>
					<radio @click="changeShow(item.productName+'-1')" value="1" :checked='item.showType==1' />
					<text>{{$t('flowers.unshow')}}</text>
				</label>
			</radio-group>
		</view>
		<view class="tr">
			<button type="primary" formType="submit" @click="updateProducts()" class="button">
				<p class="p1">{{$t('flowers.submit')}}</p>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import {
		dateUtils
	} from '@/common/util.js';
	export default {
		data() {
			return {
				globalUser: {},
				index: null,
				index2: null,
				equipmentName: null,
				equipmentNameList: [],
				products: [],
				productList: [],
				productName: null,
				equipmentId: null,
				searchClientId: null,
				showType: 0
			}
		},
		onShow() {
			this.globalUser = uni.getStorageSync("globalUser");
			this.globalUser.todayDate = dateUtils.getCurrentDate();
			// uni.setNavigationBarTitle({
			// 	title: this.$t('equipmentStatusList.title')
			// });
			// uni.setTabBarItem({
			// 	index: 3,
			// 	text: this.$t('tabs.tab4')
			// });
			var token = uni.getStorageSync("token");
			uni.setNavigationBarTitle({
				title: this.$t('remoteList.flowers')
			});
			if (token.length > 1) {
				this.getEquipmentListData();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}

		},
		methods: {
			...mapActions('chart', ['getEquipmentListByUser']),
			getEquipmentListData() {
				this.getEquipmentListByUser(this.globalUser)
					.then(data => {
						this.merchantList = data;
						var listName = data[0].equipmentList;
						var equipmentNameList = [];
						for (var i = 0; i < listName.length; i++) {
							equipmentNameList.push(this.$t('common.name') + listName[i].name + ' , '+ this.$t('common.ID') + listName[i].clientId.substring(
								listName[i].clientId.length - 6, listName[i].clientId.length));
						}
						this.equipmentNameList = equipmentNameList;
						var listId = data[0].id;
						if (listId != null && listId != '1') {
							uni.setStorageSync("listName", listName);
						}
						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			search() {
				var clientId = this.searchClientId;
				var list = uni.getStorageSync("listName");
				var n = 0;
				for (var i = 0; i < list.length; i++) {
					var code = list[i].clientId.substring(list[i].clientId.length - 6, list[i].clientId.length);
					if (code == clientId) {
						n++;
						this.index = i;
						var id = list[i].id;
						this.getProName(id);
						this.equipmentId = id;
						this.productName = null;
						this.index2 = null;
						break;
					}
				}
				if (n == 0) {
					uni.showModal({
						title: this.$t('common.tip'),
						content: this.$t('common.noDevice'),
						success: (res) => {

						}
					})
				}
			},
			sugarList() {
				uni.navigateTo({
					url: 'sugarList',
				});
			},
			//改变机器
			changeEquipment: function(e) {
				this.index = e.target.value;
				// console.log("index="+this.index)
				var list = uni.getStorageSync("listName");
				this.getProName(list[e.target.value].id);
				this.equipmentId = list[e.target.value].id;
				this.productName = null;
				this.index2 = null;
				this.searchClientId = null;
			},
			changeProduct: function(e) {
				this.index2 = e.target.value;
				// console.log("index="+this.index2)
				var list = this.products;
				this.productName = list[this.index2].productName;
			},
			//获取商品列表
			getProName(equipmentId) {
				// console.log("equipmentId="+equipmentId)
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TProduct/selectProducts',
					data: {
						"equimentId": equipmentId
					},
					header: {
						'token': token
					},
					method: "GET",
					success: (res) => {
						var listName = res.data.data;
						this.products = listName;
						var productList = [];
						for (var i = 0; i < listName.length; i++) {
							productList.push(listName[i].productName);
						}
						this.productList = productList;
					},
				});
			},
			changeShow(nameNum) {
				var arr = nameNum.split("-");
				var name = arr[0];
				var num = arr[1];
				var list = [];
				var productList = this.products;
				for (var i = 0; i < productList.length; i++) {
					var product = productList[i];
					if (name == product.productName) {
						product.showType = num;
					}
					list.push(product);
				}
				this.products = list;
			},
			//按糖颜色去筛选花型的显示
			changeShowList(nameNum) {
				debugger
				var arr = nameNum.split("-");
				var name = arr[0];
				var num = arr[1];
				var list = [];
				var productList = this.products;
				var products = [];
				//修改所有蓝色的花型
				if (name == 'blue') {
					// products = ['精灵蝶梦', '夏日倾城', '百花齐放', '星空幻想', '坠入星空', '花飞蝶舞', '花样年华', '五彩缤纷', '幽兰爱恋', '冰美人', '海洋之心',
					// 	'彩色精灵'
					// ];
					products = ['A19', 'A20', 'A21', 'A24', 'A25', 'A28', 'A29', 'A03', 'A09', 'A12', 'A15',
						'A17'
					];
				}
				
				if (name == 'yellow') {
					// products = ['精灵蝶梦', '夏日倾城', '百花齐放', '蜂缠蝶恋', '星空幻想', '坠入星空', '花飞蝶舞',
					// 	'花样年华', '心花怒放', '五彩缤纷', '美梦成真', '夏日爱恋', '国色天香', '彩色精灵',
					// ];
					products = ['A19', 'A20', 'A21', 'A22', 'A24', 'A25', 'A28',
						'A29', 'A30', 'A03', 'A07', 'A11', 'A13', 'A17',
					];
				}
				if (name == 'red') {
					// products = ['精灵蝶梦', '夏日倾城', '百花齐放','星空幻想', '蜂缠蝶恋', '豆蔻年华', '花飞蝶舞', '花样年华', '心花怒放',
					// 	'玫瑰精灵', '童心未泯', '五彩缤纷', '烈焰红唇', '美梦成真', '一见钟情', '赤子之心', '彩色精灵'
					// ];
					products = ['A19', 'A20', 'A21','A24', 'A22', 'A23', 'A28', 'A29', 'A30',
						'A01', 'A02', 'A03', 'A06', 'A07', 'A08', 'A14', 'A17'
					];
				}
				if (name == 'white') {
					// products = ['蜂缠蝶恋', '雪花飞舞', '春暖花开', '天雪恋舞', '心花怒放','水中芙蓉', '幽兰爱恋', '心之守护', '水晶之恋', '小棉袄'];
					products = ['A22', 'A26', 'A27', 'A04', 'A30','A05', 'A09', 'A10', 'A16', 'A18'];
				}
				for (var j = 0; j < products.length; j++) {
					for (var i = 0; i < productList.length; i++) {
						var product = productList[i];
						if (products[j] == product.no) {
							product.showType = num;
							// list.push(product);
						}
						
					}
				}

				this.products = productList;
			},
			updateProducts() {
				uni.showModal({
					title: this.$t('common.tip'),
					content: this.$t('flowers.sure'),
					success: (res) => {
						if (res.confirm) {
							// var that = this;
							var token = uni.getStorageSync("token");
							var products = this.products;
							if (products == null) {
								return;
							}
							// encodeURIComponent(JSON.stringify(products))
							var list = JSON.stringify(products);
							uni.request({
								url: this.serverurl + '/TProduct/updateProductsShow',
								data: {
									"productList": list
								},
								header: {
									'token': token
								},
								method: "POST",
								success: (res) => {
									var code = res.data.code;
									if (code == true) {
										uni.showToast({
											title: this.$t('common.success'),
											duration: 2000
										});
									} else {
										uni.showToast({
											title: res.data.message,
											duration: 2000
										});
									}
								},
							});
						} else if (res.cancel) {}

					}
				})
			},
			selectSugar(no) {
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TSugarDo/selectSugarStatus',
					data: {
						"no": no
					},
					header: {
						'token': token
					},
					method: "GET",
					success: (res) => {
						var code = res.data.code;
						if (code == true) {
							uni.showModal({
								title: "提示",
								content: res.data.message,
								success: (res) => {

								}
							})

							// var sugar = res.data.data;
						} else {
							uni.showModal({
								title: this.$t('common.tip'),
								content: res.data.message,
								confirmText: this.$t('dosugar.reSearch'),
								success: (res) => {
									if (res.confirm) {
										this.selectSugar(no);
									} else if (res.cancel) {}
								}
							})
						}
					},
				});
			}
		}
	}
</script>

<style>
	.search {
		width: 100%;
		padding-top: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.search-title {
		width: 28%;
		text-align: center;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
	}

	.search-input{
		width: 48%;
		height: 25px;
		text-align: center;
		font-size: 26upx;
		/* font-family: "PingFang-SC-Bold"; */
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}
	.search-button{
		width: 20%;
		padding-left: 10px;
		padding-bottom: 5px;
		text-align: center;
		height: 60upx;
		text-align: left;
	}

	.tr {
		padding-top: 15upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 48upx;
		font-family: "PingFang-SC-Bold";
		/* position: fixed; */
		bottom: 100upx;
		width: 100%;
	}

	.product {
		font-family: "PingFang-SC-Bold";
		font-size: 38upx;
		padding-top: 15upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.productName {
		width: 70%;
		padding-left: 40upx;
		padding-right: 10upx;
	}

	.button {
		margin: auto;
		width: 60%;
		height: 100upx;
	}

	.p2 {
		font-size: 30upx;
		/* #ifndef H5 */
		padding-top: 3upx;
		/* #endif */
		position: absolute;
		/* 水平居中 */
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.p1 {
		font-size: 48upx;
	}

	.p {
		align: right;
		color: #007AFF;
		padding-top: 30upx;
	}

	.line {
		background: #ECECEC;
		height: 20upx;
	}
</style>