<template>
<view>
<view style="width:630upx; margin:auto; display: flex; flex-direction: column;">
<view style="width:100%; min-height: 741upx; background: #282932; border-radius: 10upx; position: relative;">
<view @click="cancel()" style="position: absolute; top: 0upx; right: 0upx;">
<image src="../../../static/mine/icon_guanbi.png" mode=""
style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image>
</view>
<!-- 品牌 -->
<view v-if="sizelist != null && sizelist.length == 0">
<view style="margin:46upx auto 52upx;font-size: 36upx; color: #FFFFFF; text-align: center;">
请选择定制手机壳品牌
</view>
<!-- 无数据 -->
<view v-if="catrgoryList.length == null" style="text-align: center; color: #BEBEBE;">该设备没有库存</view>
<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
width: 288upx; margin:30upx auto; height: 600upx; overflow: hidden;">
<view v-for="(item,index) in catrgoryList" :key="index" @click="brandclick(item)"
:class="[brandtext == item.title ? 'brandactive':'' ]"
style="margin-bottom: 10upx; display: flex;align-items: center;
background: #373743;border-radius: 10upx;height: 90upx; line-height: 90upx; justify-content: center; overflow: hidden;">
<view style="width: 45%;">
<image :src="item.icon" mode="aspectFit" style="width: 30%; height: 60upx; margin-right: 26upx; float: right;"></image>
</view>
<view style="width: 55%;">
<view style="text-align: left; color: #FFFFFF; font-size: 28upx;" >{{item.title}} </view>
</view>
</view>
</scroll-view>
</view>
<!-- 机型 -->
<view v-if="sizelist.length > 0">
<view style="margin:46upx auto 52upx;font-size: 36upx; color: #FFFFFF; text-align: center;">
请选择手机壳型号
</view>
<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
width: calc(100% - 60upx); margin:30upx auto; height: 500upx; overflow: hidden;">
<view v-for="(item,index) in sizelist" :key="index" style="float: left; margin-bottom: 20upx;">
<view class="model" :class="[modeltext == item.title ? 'modelactive':'' ]" @click="modelclick(item)">{{item.title}} </view>
</view>
</scroll-view>
<view style="width:100%; display: flex; height: 100upx; align-items: center;border-radius:0 0 10upx 10upx; position: relative;z-index: 3; margin-bottom: 20upx;">
<view @click.stop="cancel_center()" style="width:50%;">
<view class="canbutton">返回</view>
</view>
<view @click.stop="changeChannel()" style="width:50%;">
<view class="experiencebutton" style="margin: auto;">
确定
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import homeservice from '@/service/homeservice.js';
export default {
props: {
},
components: {
},
data() {
return {
queryPage: {
s: 'Material.list',
},
long: null,
catrgoryList:[],
sizelist: [],
brandtext:null,
modeltext:null,
goods_id:null,
dict_id:null,
machine_id:null,
key:null, //1直营配送站 2 万能通用版 3色彩自助站
goods_id_e:null,
sn:null
};
},
mounted() {
},
/**
* 组件的公有方法列表
*/
methods: {
cancel(){
this.$emit('brandscenterclose')
},
open(options) {
this.catrgoryList = this.$base.productfind
if (options.machine_id != 'null') {
this.machine_id = options.machine_id;
this.key = options.key;
this.goods_id = options.goods_id;
this.sn = options.sn;
}
//查询手机壳品牌
this.Customize_now()
},
brandclick(e){
this.brandtext = e.title
this.sizelist = e.sub
},
modelclick(e){
this.modeltext = e.title
this.goods_id = e.id
this.dict_id = e.dict_id
this.goods_id_e = e
},
// 手机壳品牌
Customize_now(){
homeservice.queryList({
s: 'product.find',
machine_id:this.machine_id,
key:this.key
}).then(result => {
this.catrgoryList = result[0].brand;
this.$base.productfind = result[0].brand
console.log(result)
}).catch(err => {
uni.showToast({title: err.msg,icon: 'none'});
});
this.sizelist = []
this.brandtext = null
this.modeltext = null
this.goods_id = null
this.dict_id = null
},
cancel_center(){
this.modeltext = null
this.goods_id = null
this.dict_id = null
this.sizelist = []
},
changeChannel(){
// 释放锁定库存
// homeservice.queryList({
// // s: 'Order.lockAttrStock',
// s: 'Order.newLockAttrStock',
// machine_id:this.machine_id, //设备id
// goods_id:null, //产品
// dict_id:null,//产品属性id
// old_sn:null,
// onlyClear:1
// }).then(result => {
// }).catch(err => {
// uni.showToast({title: err.msg || err.data,icon: 'none'});
// });
var loading = false
if (loading) return;
if (this.goods_id == null) {
uni.showToast({title: '请选择手机壳型号！',icon: 'none'});
return false;
}
loading = true
if (loading) {
// 有设备判断设备是否正常
if(this.machine_id != undefined && this.machine_id != null && this.machine_id != ''){
if(this.key == 2){
this.$emit('goodsbrands',{
sn:this.sn,
goods_id_e:this.goods_id_e
})
}else{
// 锁定库存
homeservice.queryList({
//s: 'Order.lockAttrStock',
s: 'Order.newLockAttrStock',
machine_id:this.machine_id, //设备id
goods_id:this.goods_id, //产品
dict_id:this.dict_id,//产品属性id
old_sn:this.sn
}).then(result => {
this.$base.lockInventory = result //锁库存储存信息
//console.log(result.sn)
this.sn = result.sn
uni.setStorage({
key: 'setgood',
data: {
sn:this.sn,
brandtext:this.brandtext,
modeltext: this.modeltext,
goods_id: this.goods_id
},
success: function () {
console.log('success');
}
});
this.$emit('goodsbrands',{
sn:this.sn,
goods_id_e:this.goods_id_e
})
}).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'});
});
}
}else{
this.$emit('goodsbrands',{
sn:this.sn,
goods_id_e:this.goods_id_e
})
}
}
}
},
onShow(options) {
},
}
</script>
<style lang="scss">
.experiencebutton{
width: 230upx; height: 70upx; line-height: 70upx; text-align: center; color: #FFFFFF;
margin:40upx auto 0; border-radius: 35upx; background: linear-gradient(to right,#834DC4,#1983D7);
font-size: 26upx;
}
.canbutton{
color: #FFFFFF;
font-size: 26upx;
width: 218upx;
height: 58upx;
line-height: 58upx;
border: 1px transparent solid;
border-radius: 30px;
position: relative;
margin: auto;
background: #292933;
text-align: center;
}
.canbutton:after{
content:'';
position: absolute;
top: -3px; bottom: -3px;
left: -3px; right: -3px;
background: linear-gradient(to right,#834DC4,#1983D7);
border-radius: 30px;
content: '';
z-index: -1;
}
// 品牌
.brandactive{
background: #141319 !important;
color: #FFFFFF !important;
}
// 型号
.model{
padding: 0upx 20upx;
height: 60upx;
line-height: 60upx;
background: #141319;
text-align: center;
color: #FFFFFF;
border-radius: 30upx;
margin-right: 20upx;
font-size: 28upx;
}
.modelactive{
color: #1A7DCD;
}
</style>