|
|
@@ -0,0 +1,248 @@
|
|
|
+<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-input title="衣长" v-model="reqData.username" align="right"></tm-input>
|
|
|
+ <tm-input title="上市年份" v-model="reqData.height" align="right"></tm-input>
|
|
|
+ <tm-input title="颜色" v-model="reqData.weight" align="right"></tm-input>
|
|
|
+ <tm-input title="尺码" v-model="reqData.username" align="right"></tm-input>
|
|
|
+ <tm-input title="品牌" v-model="reqData.height" align="right"></tm-input>
|
|
|
+ <tm-input title="主材含量" v-model="reqData.weight" align="right"></tm-input>
|
|
|
+ <tm-input title="适用对象" v-model="reqData.weight" 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'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ reqData:{
|
|
|
+ username:'1',
|
|
|
+ height:'1',
|
|
|
+ weight:'1',
|
|
|
+ },
|
|
|
+ koutu:'/static/img/53.png',
|
|
|
+ shencaiList:[
|
|
|
+ {title:"梨形",id:21},
|
|
|
+ {title:"标准",id:31},
|
|
|
+ {title:"胖子",id:41},
|
|
|
+ {title:"瘦子",id:51},
|
|
|
+ {title:"模特",id:61},
|
|
|
+ ],
|
|
|
+ shenxing:'',
|
|
|
+ active:3,
|
|
|
+ name:'',
|
|
|
+ val_1:'',
|
|
|
+ chelianglis:[
|
|
|
+ {title:"标准",id:21},
|
|
|
+ {title:"偏瘦",id:31},
|
|
|
+ {title:"偏胖",id:41},
|
|
|
+ {title:"梨形",id:51},
|
|
|
+ {title:"S型",id:61},
|
|
|
+ ],
|
|
|
+ reqData:{
|
|
|
+ username:'',
|
|
|
+ height:'',
|
|
|
+ weight:'',
|
|
|
+ shencai:[]
|
|
|
+ },
|
|
|
+ renList:[]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.sys = uni.getSystemInfoSync();
|
|
|
+ this.add()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ jixu(){
|
|
|
+ this.active=1;
|
|
|
+ },
|
|
|
+ quindex(){
|
|
|
+ // uni.setStorageSync("index",1)
|
|
|
+ // this.$emit('fatherMethod', )
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/index/index?index=1",
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tijiao(){
|
|
|
+ // console.log(this.renList)
|
|
|
+ // for(let i=0;i<this.renList.length;i++){
|
|
|
+ // if(this.renList[i].){}
|
|
|
+ // }
|
|
|
+ // this.active=4;
|
|
|
+ },
|
|
|
+ add(){
|
|
|
+ var timestamp = Date.parse(new Date());
|
|
|
+ var obj={
|
|
|
+ username:'',
|
|
|
+ height:'',
|
|
|
+ weight:'',
|
|
|
+ shencai:[],
|
|
|
+ timestamp:timestamp
|
|
|
+ }
|
|
|
+ this.renList.push(obj)
|
|
|
+ },
|
|
|
+ shanchu(timestamp){
|
|
|
+ var index = this.renList.findIndex((item) => {
|
|
|
+ return item.timestamp == timestamp;
|
|
|
+ });
|
|
|
+ this.renList.splice(index, 1);
|
|
|
+ },
|
|
|
+ obTstr2(o){
|
|
|
+ if(Array.isArray(o)){
|
|
|
+ if(o.length.length===0) return "";
|
|
|
+ return o[0]?.title??""
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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 e4b9accfb1f246cb8c0766a54efe8730',
|
|
|
+ "Content-Type":"application/json;charset=UTF-8"
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ photo:src
|
|
|
+ },
|
|
|
+ success : function(data) {
|
|
|
+ console.log(data)
|
|
|
+ that.koutu=data.data.data.result
|
|
|
+ that.active=2;
|
|
|
+ },
|
|
|
+ error : function(e) {
|
|
|
+ alert("网络异常，请重试");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ chuangjianFun(){
|
|
|
+ var that=this;
|
|
|
+ // if(that.name==""){
|
|
|
+ // that.$refs.toast.show({model:'warn',label:'请输入家庭名称'})
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ that.active=3;
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</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;}
|
|
|
+</style>
|
