wardrobe/pages/luru/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="衣物录入" :shadow="0" :showback="true"></tm-menubars>
		<div class="zhuti">
			<tm-sheet class="kuang" style="padding-bottom: 70px !important;">
				<image v-if="active==1" class="jindu" src="/static/img/49.png" mode="widthFix"></image>
				<image v-if="active==2" class="jindu" src="/static/img/50.png" mode="widthFix"></image>
				<image v-if="active==3" class="jindu" src="/static/img/51.png" mode="widthFix"></image>
				<view class="wenzi flex-between flex-center" style="margin-top: 10px;">
					<view>
						<text class="text-white text-size-m">衣物拍照</text>
					</view>
					<view>
						<text class="text-white text-size-m">确认衣物属性</text>
					</view>
					<view>
						<text class="text-white text-size-m">入库成功</text>
					</view>
				</view>
				<view v-if="active==1">
					<view class="mt-20 ml-15">
						<text class="text-white text-size-m">*衣物拍照实例图</text>
					</view>
					<image block class="zhanshi" mode="widthFix" src="/static/img/48.png"></image>
					<tm-button :round="24" class="mb-40" @click="paizhao()" block>拍照录入</tm-button>
				</view>
				<view v-if="active==2">
					<image block class="nicheng" mode="widthFix" :src="koutu"></image>
					<view class="you black mt-30">
						<!-- <tm-pickers v-for="item in arrbig" class="tan" :default-value.sync="item.choosevalue" rang-key="category_name" list="[]">
							<tm-input title="分类" placeholder="请选择分类" disabled :value="obTstrnew(category_danarr,'')" right-icon="icon-angle-right"></tm-input>
						</tm-pickers> -->
						<view v-for="(item,index) in arrbig">
							<tm-pickers v-if="item.type=='select'"  @confirm="xuanze" :indexfu="index" :list="item.value">
								<tm-input :title="item.name" align="right" :placeholder="'请选择'+item.name" v-model="item.choosevalue" disabled right-icon="icon-angle-right"></tm-input>
							</tm-pickers>
							<tm-input v-if="item.type=='text' && item.name !='颜色'" :title="item.name" v-model="item.value" disabled align="right"></tm-input>
							<view class="border-b-0 border-grey-darken-4-b-1 py-24 flex-between" v-if="item.name=='颜色'">
								<text class="text-size-n ">{{item.name}}</text>
								<view>
									<view  class="seka" :style="{'backgroundColor':buttonColor}" @tap="showPickerColorPop"></view>
									<picker-color :isShow="showPickerColor" :bottom="bottomPickerColor"  @callback='getPickerColor' />
								</view>
							</view>
						</view>
						
						<!-- <tm-listitem
							v-for="item in arrbig"
							:left-icon-size="80"
							value="打开"
							title="支付"
							label="微信和支付宝微信和支付宝微信和支付宝微信和支付宝"
							left-icon="https://cdn.roundicons.com/wp-content/uploads/2017/09/Lego-freebie-icon.png"
							show-left-icon
						></tm-listitem> -->
						<!-- <tm-input :required="true" title="商品名称" v-model="reqData.goods_name" align="right"></tm-input> -->
						<!-- <tm-pickers class="tan" :default-value.sync="category_danarr" rang-key="category_name" :list="category_arr">
							<tm-input :required="true" title="分类" placeholder="请选择分类" :value="obTstr1(category_danarr,'category_name')" right-icon="icon-angle-right"></tm-input>
						</tm-pickers> -->
						<!-- <tm-pickers class="tan" :default-value.sync="role_danarr" rang-key="username" :list="role_arr">
							<tm-input title="所属成员" :required="true" placeholder="请选择所属成员" disabled :value="obTstr3(role_danarr)" right-icon="icon-angle-right"></tm-input>
						</tm-pickers> -->
						<!-- <tm-input title="年份" v-model="reqData.year" align="right"></tm-input>
						<tm-input title="颜色" v-model="reqData.color" align="right"></tm-input>
						<tm-pickers class="tan" :default-value.sync="size_danarr" rang-key="title" :list="size_arr">
							<tm-input title="尺码" placeholder="请选择尺码" disabled :value="obTstr2(size_danarr)" right-icon="icon-angle-right"></tm-input>
						</tm-pickers>
						<tm-input title="适用人群" v-model="reqData.type" align="right"></tm-input>
						<tm-input title="品牌" v-model="reqData.brand" align="right"></tm-input>
						<tm-input title="材料" v-model="reqData.science" align="right"></tm-input> -->
					</view>
					<tm-button :round="24" class="sao mb-40 mt-40" @click="chuangjianFun()" block>提交</tm-button>
				</view>
				<view v-if="active==3">
					<tm-translate ref="a_1" :auto="true" animation-name="zoomIn">
						<image block class="nicheng" mode="widthFix" src="/static/img/52.png"></image>
					</tm-translate>
					<view class="text-align-center mt-20">
						<text class="text-size-m text-white">衣物添加成功！</text>
					</view>
					<view class="text-align-center mb-40">
						<text class="text-size-m">您可以在我的衣柜中添加或删除衣物</text>
					</view>
					<view class="px-24">
						<tm-button  @click="jixu()" :round="24" block class="mt-50 logincla">继续添加衣物</tm-button>
						<tm-button @click="quindex()" theme="primary" :round="24" block class="mt-30 quindex">进入衣柜</tm-button>
					</view>
				</view>
			</tm-sheet>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'
import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
export default {
	components: {
		"picker-color":pickerColor,
	},
	data() {
		return {
			buttonColor:"#0099FF",
			showPickerColor:false,
			bottomPickerColor:0,
			arrbig:[],
			koutu:'/static/img/53.png',
			active:0,
			category_arr:[],
			category_danarr:[],
			size_arr:[
				{title:"S",id:1},
				{title:"M",id:2},
				{title:"L",id:3},
				{title:"XL",id:4},
				{title:"XXL",id:5},
				{title:"其他",id:6},
			],
			size_danarr:[],
			role_arr:[],
			role_danarr:[],
			reqData:{
				goods_name:'',
				category_id:'',
				year:'',
				color:'',
				image:'',
				type:'',
				thumb:'',
				size:'',
				brand:'',
				science:'',
				role_id:''
			},
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
		this.getFl();
		this.getCY();
		this.jiaobenFun()
	},
	methods: {
		/* 显示获取颜色选择弹窗 */
		showPickerColorPop(){
			this.showPickerColor=true;
		},
		/* 获取颜色选择回调 */
		getPickerColor(color){
			/* 隐藏弹窗 */
			this.showPickerColor=false;
			/* 判断颜色值是否有效 */
			if(color){
				this.buttonColor=color;
				console.log('选择的颜色值是：'+color);
			}
		},
		showPickerColorPop(){
			this.showPickerColor=true;
		},
		xuanze(data){
			// var index=data[0].index;
			// this.arrbig[index].choosename=data[0].data;
			console.log(data)
		},
		getFl(){
			var that=this;
			myRequest({
				url: "/api/Category/list",
				method:'post',
				data:{}
			}).then(res => {
				console.log(res.data)
				if (res.data.code == 200) {
					this.category_arr=res.data.data;
				}else{
					that.category_arr=[];
				}
			})
		},
		getCY(){
			var that=this;
			myRequest({
				url: "/api/MemberInfo/getFamilyMember",
				method:'post',
				data:{family_id:uni.getStorageSync("family_id")}
			}).then(res => {
				if (res.data.code == 200) {
					that.role_arr=res.data.data;
				}else{
					that.role_arr=[];
				}
			})
		},
		obTstr1(o){
			if(Array.isArray(o)){
				if(o.length.length===0) return "";
				return o[0]?.category_name??""
			}
			return ''
		},
		obTstr2(o){
			if(Array.isArray(o)){
				if(o.length.length===0) return "";
				return o[0]?.title??""
			}
			return ''
		},
		obTstr3(o){
			if(Array.isArray(o)){
				if(o.length.length===0) return "";
				return o[0]?.username??""
			}
			return ''
		},
		jixu(){
			this.active=1;
		},
		quindex(){
			uni.switchTab({
				url: "/pages/wardrobe/index",
			})
		},
		paizhao(){
			var that=this;
			uni.chooseImage({     //uni官方api，用于选取本地图片
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: function (res) {
					that.imgpath = res.tempFilePaths[0]   //先获得本地文件的路径列表，存储到数组
					console.log(that.imgpath)          //注意该api会将路径转换为blob格式
					// that.getBase64Image(that.imgpath);
					// 调脚本接口
					that.jiaobenFun()
				}
			})
		},
		obTstrnew(o){
			if(Array.isArray(o)){
				if(o.length.length===0) return "";
				return o[0]?.category_name??""
			}
			return ''
		},
		jiaobenFun(){
			var that=this;
			myRequest({
				url: "/api/Goods/selectScript",
				method:'post',
				data:that.reqData
			}).then(res => {
				console.log(res.data)
				if (res.data.code == 200) {
					var arrbig=[
						{name:"名称",value:"羽绒服",choosevalue:'',type:'text'},
						{name:"颜色",value:"#b1b1b1",choosevalue:'',type:'text'},
						{name:"尺码",value:["S","L","M"],choosevalue:'L',type:'select'},
						{name:"材质",value:["牛仔","纯棉","羊毛"],choosevalue:'纯棉',type:'select'}
					]
					that.arrbig=arrbig;
					that.active=2;
					console.log(that.arrbig)
				}else{
					
				}
			})
		},
		getBase64Image(path){
			var that=this;
			console.log(" 开始转换")
			pathToBase64(path)
			  .then(base64 => {
			   that.shibie(base64)
			  })
			  .catch(error => {
			    console.error(error)
			  })
		},
		shibie(src){
			var that=this;
			// 抠图
			uni.request({
				url: 'https://objseg.market.alicloudapi.com/commonseg/rgba',
				method : "post",
				header: {
					'Authorization':'APPCODE a4a922a41afa43a0bbca6c831a13bf43',
					"Content-Type":"application/json;charset=UTF-8"
				},
				data:{
					photo:src
				},
				success : function(data) {
					that.koutu=data.data.data.result;
					that.active=2;
				},
				error : function(e) {
					that.$refs.toast.show({model:'error',label:"网络异常，请重试"})
				}
			});
		},
		chuangjianFun(){
			var that=this;
			if(that.reqData.goods_name==""){
				that.$refs.toast.show({model:'warn',label:'请输入商品名称'})
				return
			}
			if(that.category_danarr.length==0){
				that.$refs.toast.show({model:'warn',label:'请选择分类'})
				return
			}else{
				that.reqData.category_id=that.category_danarr[0].id
			}
			if(that.role_danarr.length==0){
				that.$refs.toast.show({model:'warn',label:'请选择成员'})
				return
			}else{
				that.reqData.role_id=that.role_danarr[0].id
			}
			if(that.size_danarr.length!=0){
				that.reqData.size=that.size_danarr[0].id
			}
			that.reqData.image=that.koutu;
			that.reqData.thumb=that.koutu;
			myRequest({
				url: "/api/Goods/addGodds",
				method:'post',
				data:that.reqData
			}).then(res => {
				console.log(res.data)
				if (res.data.code == 200) {
					that.active=3;
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
		}
	},
}
</script>

<style lang="scss">
	.zhanshi{
		width: 100%;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 40px;
	}
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .kuang{margin:0 !important;padding: 14px !important;margin-bottom: 40px !important;}
	// /deep/ .kuang uni-button{background-color: #303440 !important;}
	.jindu{width: 90%;margin: 0 auto;display: block;}
	.wenzi{width: 94%;margin: 0 auto;}
	.nicheng{width: 60%;display: block;margin:0 auto;margin-top: 50px;}
	/deep/ .shuru .grey-darken-5{
		background-color: #0d0d0d!important;
		padding: 0px !important;
	}
	.shuru{border:1px solid #303030;border-radius: 10px;}
	/deep/ .shuru .text-primary.bk{color:#303030 !important;}
	/deep/ .shuru .border-grey-darken-4-b-1{border-bottom:none !important;}
	.zuo image{width:60px;display: block;}
	.you{border:1px solid #303030;border-radius: 10px;padding:10px;}
	/deep/ .you .grey-darken-5{
		background-color: #0d0d0d!important;
		padding: 0px !important;
	}
	/deep/ .you .text-red{color: white;}
	/deep/ .tan .active{background-color: #AAAAAA !important;}
	/deep/ .tan .tm-poups .grey-darken-5{background-color: gray !important;}
	/deep/ .tan uni-input{text-align: right;}
	/deep/ .you .border-grey-darken-4-b-1 {
	    border-bottom: solid 1px #313131 !important;
	}
	/deep/ .tm--badges{position: absolute;top: 0px;right:6px}
	.logincla{margin-top: 100px;}
	/deep/ .logincla .primary{background-color: #303440 !important;}
	/deep/ .quindex uni-button{background-color: #0A84FF !important;}
	.seka{width: 40px;height: 20px;}
</style>