<template>
<view class="edit-address full-height full-width">
<view class="form full-width">
<!-- 自定义 -->
<view v-if="!preview" class="full-width" scroll-y style="height: calc(100% - 120upx);overflow: scroll;">
<view style="width: 690upx; height: 420upx; overflow: scroll; margin:0 auto 47upx;display: flex;
justify-content: center; margin-top: 30upx; ">
<image mode="widthFix"
:src="'https://img.colorpark.cn/back/16668389136359f18160568.png?x-oss-process=image/resize,lfit,w_' + imageWith"
:style="{width: imageWith * scale +'px', height:imageHeight * scale + 'px' }"
style=" margin:auto; position: absolute; "></image>
<view :style="{width: imageWith * scale +'px', height:imageHeight * scale + 'px' }"
style=" margin:auto; position: absolute; z-index: 999; ">
<view :style="{width: printWidth != '' ? printWidth * scale +'px' : 0 +'px',
height: printHeight != '' ? printHeight* scale +'px' : 0 +'px',
marginTop: printTop != '' ? printTop* scale +'px' : 0 +'px' ,
marginLeft: printLeft != '' ? printLeft* scale +'px' : 0 +'px' ,borderRadius: switchIsFillet ? defalutFillet + 'px' : '0px' }"
style="background: #FFFFFF; ">
</view>
</view>
</view>
<view style="position: relative; margin-top: 50upx;">
<!-- 请输入手机型号 -->
<view style="display: flex; margin-left: 20upx; margin-top: 40upx;">
<!-- <view style="font-size: 28upx; font-weight: 400; color: #FFFFFF; width: 155upx;">手机型号:</view -->
<view style="width: calc(100% - 80upx); height: 66upx; background: #282932; border-radius: 30upx;
display: flex; align-items: center;">
<input placeholder="请输入手机型号"
style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: 200upx;"
v-model="phone" />
</view>
</view>
<!-- 自定义高度 -->
<view style="display: flex;align-items: center; margin-left: 20upx; margin-top: 20upx;">
<!-- <view style="font-size: 28upx; font-weight: 400; color: #FFFFFF; width: 155upx;">上边距:</view> -->
<view style="width: calc(100% - 70upx); height: 66upx; background: #282932; border-radius: 30upx;
display: flex;align-items: center ">
<input type="digit" placeholder="请输入上边距" @input="changeTop" :value="printTop"
style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: calc(100% - 90upx);" />
<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
</view>
<image src="../../static/icon_custom_tips.png"
style="width: 48upx; height: 48upx;margin-left: 10upx;" mode="widthFix"
@click="showUpdateRule(1)"> </image>
</view>
<view
style="display: flex; align-items: center; margin-left: 20upx; margin-top: 20upx; position: relative;">
<!-- <view style="font-size: 28upx; font-weight: 400; color: #FFFFFF;width: 155upx;">左边距:</view> -->
<view style="width: calc(100% - 70upx);; height: 66upx; background: #282932; border-radius: 30upx;
display: flex; align-items: center;">
<input type="digit" :value="printLeft" placeholder="请输入左边距" @input="changeLeft"
style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: calc(100% - 90upx);" />
<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
</view>
<image src="../../static/icon_custom_tips.png"
style="width: 48upx; height: 48upx;margin-left: 10upx;" mode="widthFix"
@click="showUpdateRule(2)"> </image>
</view>
</view>
<view style="position: relative;">
<!-- 自定义高度 -->
<view style="display: flex; align-items: center; margin-left: 20upx; margin-top: 20upx;">
<view style="width: calc(100% - 70upx); height: 66upx; background: #282932; border-radius: 30upx;
display: flex; align-items: center;">
<input type="digit" placeholder="请输入宽度" @input="changeWidth" :value="printWidth"
style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: calc(100% - 90upx);" />
<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
</view>
<image src="../../static/icon_custom_tips.png"
style="width: 48upx; height: 48upx; margin-left: 10upx;" mode="widthFix"
@click="showUpdateRule(3)"> </image>
</view>
<!-- 自定义高度 -->
<view style="display: flex; align-items: center; margin-left: 20upx; margin-top: 20upx;">
<!-- <view style="font-size: 28upx; font-weight: 400; color: #FFFFFF;width: 155upx;">高度:</view> -->
<view style="width: calc(100% - 70upx);height: 66upx; background: #282932; border-radius: 30upx;
display: flex; align-items: center;">
<input type="digit" placeholder="请输入宽度" @input="changeHeight" :value="printHeight"
style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: calc(100% - 90upx);" />
<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
</view>
<image src="../../static/icon_custom_tips.png"
style="width: 48upx; height: 48upx; margin-left: 10upx;" mode="widthFix"
@click="showUpdateRule(4)"> </image>
</view>
</view>
<view style="position: relative;">
<view style="display: flex; align-items: center; margin-left: 27upx; margin-top: 25upx;">
<!-- <view style="font-size: 28upx; font-weight: 400; color: #FFFFFF;width: 155upx;">圆角:</view> -->
<view style="width: calc(100% - 70upx); height: 66upx;
display: flex; align-items: center; margin-top: 5upx;">
<!-- 滑块封装 -->
<NumSlider ref="NumSlider" :min="0" :max="100" :width="sliderdefaultWith" :disabled="false"
:range="false" @highChange="highChange" :leftX="10"
:defalutFillet="defalutFillet" />
</view>
</view>
</view>
</view>
</view>
<view class="footer" v-if="!preview">
<view class="footer_but" hover-class="hover-class-bg" @click="onSave()">确认</view>
</view>
<uni-popup ref="showUpdateRule" type="center" style="position: fixed; z-index: 9999; width: 200upx">
<view style="width: 558upx; height: 558upx;background: #CCCCCC;text-align: center; border-radius: 10upx; ">
<view style="width:100%;height: 50upx; z-index: 999; position: absolute; top:0;">
<image @click="closeUpdateRule()" src="../../static/img/icon_close_image.png"
style=" width: 30upx; padding: 20upx; float:right; " mode="widthFix">
</image>
</view>
<image style="width: 558upx; position: absolute; top:0;left: 0; z-index: 2;" :src="tipImageUrl"
mode="widthFix" />
</view>
</uni-popup>
</view>
</template>
<script>
import Enums from '@/util/Enums';
import userService from '@/service/UserService';
import homeservice from '@/service/homeservice.js';
import uniPopup from '../index/common/uni-popup/uni-popup.vue';
import NumSlider from './components/NumSlider.vue'
export default {
components: {
uniPopup,
NumSlider
},
computed: {
},
data() {
return {
mode: 'selector',
pickerValueArray: [{
label: '毫米',
value: 0
},
{
label: '厘米',
value: 1
}
],
pickerValueDefault: [0],
companyValue: '毫米',
data: {
windowWidth: null, // 屏幕宽度
windowHeight: null, // 屏幕高度
pixelRate: null // 屏幕宽度比率
},
//上拉状态
dataLoadState: {
pullDownRefresh: false,
reachBottom: false
},
queryPage: {
s: 'Product.getCustomize',
machine_id: null,
},
Loop: null,
good: null,
type: 1, //类型 1 默认 2 选择列表
selectItemData: null, // 选中对象
low: 0, //设置圆角百分比
high: 0, //设置圆角百分比
switchIsFillet: true, //是否设置圆角
inputWidth: 0, //文本框显示数据
inputHeight: 0, //文本框显示数据
imageWith: 100, //夹具图宽度
imageHeight: 190, //夹具图高度
printTop: 10, //打印区上间距
printTopMin: 9, //打印区上间距最小
printTopMax: 13, //打印区上间距最大
printLeft: 10, //打印区左间距
printLeftMin: 9, //打印区上间距最小
printLeftMax: 13, //打印区上间距最大
printWidth: 70, //默认打印宽度
printWidthMin: 65, //打印最小宽度
printWidthMax: 85, //打印最大宽度
printHeight: 145, //默认打印高度
printHeightMin: 125, //打印最小高度
printHeightMax: 175, //打印最大高度
defalutFillet: 9, //默认圆角大小
sliderdefaultWith: 400,
key: null, //1直营配送站 2 万能通用版 3色彩自助站
scale: 1, //放大比例
tipImageUrl: "https://img.colorpark.cn/back/1667005372635c7bbc4f1db.png?x-oss-process=image/resize,lfit,w_558",
phone: "", //手机型号
OldConvert_rate: 3, //放大比例
good_id: null, //产品Id
isFirstPage: true,
}
},
methods: {
//打开弹窗
showUpdateRule(type) {
if (type == 1) {
this.tipImageUrl =
"https://img.colorpark.cn/back/1667005462635c7c16d7ec0.png?x-oss-process=image/resize,lfit,w_558"
} else if (type == 2) {
this.tipImageUrl =
"https://img.colorpark.cn/back/1667005469635c7c1dabead.png?x-oss-process=image/resize,lfit,w_558"
} else if (type == 3) {
this.tipImageUrl =
"https://img.colorpark.cn/back/1667005372635c7bbc4f1db.png?x-oss-process=image/resize,lfit,w_558"
} else if (type == 4) {
this.tipImageUrl =
"https://img.colorpark.cn/back/1667005366635c7bb61b3da.png?x-oss-process=image/resize,lfit,w_558"
}
this.$refs['showUpdateRule'].open();
},
//关闭弹窗
closeUpdateRule() {
this.$refs['showUpdateRule'].close();
},
//获取自定义产品信息
getCustomSizeInfo() {
homeservice.queryList(this.queryPage).then(result => {
this.good_id = result.id
}).catch(err => {
});
},
//开关控制圆角
switchChange(e) {
if (e.detail.value == true) {
this.switchIsFillet = true;
} else {
this.switchIsFillet = false;
}
},
highChange(val) {
this.defalutFillet = val;
},
checkNumber(value) {
var reg = /^\d*(\.\d{1,20})?$/;
var pattern = new RegExp(reg);
return pattern.test(value);
},
//1像素 = 10毫米
onSave() {
if (this.phone == "" || this.phone == null || this.phone == "null") {
uni.showToast({
icon: "success",
title: '手机型号不能为空',
duration: 2000
});
return;
}
if (this.printTop == "" || this.printTop == null || this.printTop == "null") {
uni.showToast({
icon: "success",
title: '上边距不能为空',
duration: 2000
});
return;
}
let isNumber = this.checkNumber(this.printTop)
if (!isNumber) {
uni.showToast({
icon: "success",
title: '上边距只能整数跟两位小数',
duration: 2000
});
return;
}
if (this.printTop < Number(this.printTopMin)) {
this.printTop = this.printTopMin;
uni.showToast({
icon: "success",
title: '上边距最小值' + this.printTopMin,
duration: 2000
});
return;
}
if (this.printTop > Number(this.printTopMax)) {
uni.showToast({
icon: "success",
title: '上边距最大值' + this.printTopMax,
duration: 2000
});
return;
}
if (this.printLeft == "" || this.printLeft == null || this.printLeft == "null") {
uni.showToast({
icon: "success",
title: '左边距不能为空',
duration: 2000
});
return;
}
isNumber = this.checkNumber(this.printLeft)
if (!isNumber) {
uni.showToast({
icon: "success",
title: '左边距只能整数跟两位小数',
duration: 2000
});
return;
}
if (this.printLeft < Number(this.printLeftMin)) {
this.printLeft = this.printLeftMin
uni.showToast({
icon: "success",
title: '左边距最小值' + this.printLeftMin,
duration: 2000
});
return;
}
if (this.printLeft > Number(this.printLeftMax)) {
uni.showToast({
icon: "success",
title: '左边距最大值' + this.printLeftMax,
duration: 2000
});
return;
}
if (this.printHeight == "" || this.printHeight == null || this.printHeight == "null") {
uni.showToast({
icon: "success",
title: '高度不能为空',
duration: 2000
});
return;
}
isNumber = this.checkNumber(this.printHeight)
if (!isNumber) {
uni.showToast({
icon: "success",
title: '高度只能输入整数跟两位小数',
duration: 2000
});
return;
}
if (this.printHeight < Number(this.printHeightMin)) {
this.printHeight = this.printHeightMin;
uni.showToast({
icon: "success",
title: '高度最小值' + this.printHeightMin,
duration: 2000
});
return;
}
if (this.printHeight > Number(this.printHeightMax)) {
uni.showToast({
icon: "success",
title: '高度最大值' + this.printHeightMax,
duration: 2000
});
return;
}
if (this.printWidth == "" || this.printWidth == null || this.printWidth == "null") {
uni.showToast({
icon: "success",
title: '宽度不能为空',
duration: 2000
});
return;
}
isNumber = this.checkNumber(this.printWidth)
if (!isNumber) {
uni.showToast({
icon: "success",
title: '宽度只能输入整数跟两位小数',
duration: 2000
});
return;
}
if (this.printWidth < Number(this.printWidthMin)) {
this.printWidth = this.printWidthMin;
uni.showToast({
icon: "success",
title: '宽度最小值' + this.printWidthMin,
duration: 2000
});
return;
}
if (this.printWidth > Number(this.printWidthMax)) {
uni.showToast({
icon: "success",
title: '高度最大值' + this.printWidthMax,
duration: 2000
});
return;
}
if (this.isFirstPage && this.isFirstPage == "true") {
uni.redirectTo({
url: '../index/index?machine_id=' + this.queryPage.machine_id +
'&WidthIndex=' + (this.printWidth * this.OldConvert_rate) +
'&HeightIndex=' + (this.printHeight * this.OldConvert_rate) +
"&fillet=" + (this.defalutFillet * this.OldConvert_rate) +
"&top=" + (this.printTop * this.OldConvert_rate) +
"&left=" + (this.printLeft * this.OldConvert_rate) +
"&name=" + this.phone +
'&key=' + this.key +
'&type= 3' +
"&machineDetail=" + encodeURIComponent(JSON.stringify(this.machineDetail)) +
'&goods_id=' + this.good_id
})
} else {
let pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //上一个页面
let machineDetail = encodeURIComponent(JSON.stringify(this.machineDetail));
var data = {
WidthIndex: this.printWidth * this.OldConvert_rate,
HeightIndex: this.printHeight * this.OldConvert_rate,
fillet: this.defalutFillet * this.OldConvert_rate,
top: this.printTop * this.OldConvert_rate,
left: this.printLeft * this.OldConvert_rate,
name: this.phone,
key: this.key,
type: 3,
machineDetail: machineDetail,
goods_id: this.good_id,
}
prevPage.$vm.options = data;
uni.navigateBack({
delta: 1
});
}
},
//改变上间距
changeTop(event) {
let top = this.numberone(event.detail.value);
if (Number(top) > Number(this.printTopMax)) {
top = this.printTopMax
uni.showToast({
icon: "success",
title: '上边距最大值' + top,
duration: 2000
});
}
//赋值
this.setData({
printTop: top
});
return top
},
//改变左间距
changeLeft(event) {
let left = this.numberone(event.detail.value);
if (Number(left) > Number(this.printLeftMax)) {
left = this.printLeftMax
uni.showToast({
icon: "success",
title: '左边距最大值' + left,
duration: 2000
});
}
//赋值
this.setData({
printLeft: left
});
return left
},
//改变宽度
changeWidth(event) {
let Width = this.numberone(event.detail.value);
if (Number(Width) > Number(this.printWidthMax)) {
Width = this.printWidthMax
uni.showToast({
icon: "success",
title: '宽度最大值' + Width,
duration: 2000
});
}
//赋值
this.setData({
printWidth: Width
});
return Width
},
//改变高度
changeHeight(event) {
let Height = this.numberone(event.detail.value);
if (Number(Height) > Number(this.printHeightMax)) {
Height = this.printHeightMax
uni.showToast({
icon: "success",
title: '高度最大值' + Height,
duration: 2000
});
}
//赋值
this.setData({
printHeight: Height
});
return Height
},
setData(obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function(key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function(key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
})
});
},
//验证数字输入金额
numberone(val) {
let num = val.toString(); //先转换成字符串类型
if (num.indexOf('.') == 0) { //第一位就是 .
num = '1' + num
} else if (num.indexOf('0') == 0) {
num = ''
}
num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
if (num.indexOf(".") < 0 && num != "") {
num = parseFloat(num);
}
return num
},
},
//下拉加载
onPullDownRefresh() {
},
//上拉加载
onReachBottom() {
},
onLoad(options) {
//获取屏幕宽高
let windowWidth;
let windowHeight;
let pixelRate = 1;
let that = this
wx.getSystemInfo({
success: function(res) {
let pixelRate = res.windowWidth / 750;
that.scale = pixelRate / 0.45;
that.data.windowWidth = res.windowWidth // 屏幕宽度
that.data.windowHeight = res.windowHeight // 屏幕高度
that.data.pixelRate = pixelRate // 屏幕宽度比率
that.sliderdefaultWith = that.data.windowWidth - uni.upx2px(110);
}
});
if (options) { //判断是从设备进来
this.queryPage.machine_id = options.machine_id // 设备id
this.key = options.key //设备对应key
if (options.machineDetail != undefined && options.machineDetail != "") {
this.machineDetail = JSON.parse(decodeURIComponent(options.machineDetail)); //获取设备详情数据
}
if (options.isFirstPage) {
this.isFirstPage = options.isFirstPage
}
this.getCustomSizeInfo()
}
},
onShow() {
setTimeout(function() {
this.$refs['NumSlider'].init();
}.bind(this), 800)
}
}
</script>
<style lang="scss">
page {
background: #101014;
}
.progress-wrap {
height: 30upx;
width: 100upx;
background: #ffc3cb;
border-radius: 20upx;
overflow: hidden;
position: relative;
}
.progress {
height: 30upx;
}
.percentage {
position: absolute;
left: 16upx;
top: 0;
font-size: 20upx;
color: #eee;
}
.equalRatioAxtive {
color: #2a82e4 !important;
border-color: #2a82e4 !important;
}
.directionAxtive {
border-color: #2a82e4 !important;
}
.classificationLeft {
background: #E7BE16 !important;
}
.classificationRight {
background: #E7BE16 !important;
}
.previewAxtiveLeft {
background: linear-gradient(92deg, #178CE6, #072999);
box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
border-radius: 50upx 50upx 0px 50upx;
}
.previewAxtiveRight {
background: linear-gradient(92deg, #178CE6, #072999);
box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
border-radius: 50upx 50upx 50upx 0px;
}
.eq_list {
width: calc(100% - 60upx);
margin: 20upx auto;
border-radius: 10upx;
overflow: hidden;
color: #FFFFFF;
.eq_list_div {
// background: #FFFFFF;
padding: 40upx 20upx;
display: flex;
align-items: center;
border-bottom: 1px solid #282932;
}
}
// 返回顶部
.to-top {
position: fixed;
bottom: 150upx;
right: 30upx;
width: 80upx;
height: 80upx;
border-radius: 50%;
text-align: center;
line-height: 80upx;
// box-shadow: 5upx 5upx 5upx #ebeef5;
transform: rotate(-90deg);
background: #000;
opacity: 0.5;
z-index: 999;
}
.to-top-icon {
color: #FFFFFF;
}
.edit-address {
.form {
height: 100%;
color: #FFFFFF;
.item {
height: 100upx;
display: flex;
align-items: center;
font-size: 28upx;
padding: 0 30upx;
width: calc(100% - 60upx);
.text {
width: 200upx;
}
.value {
width: 300upx;
margin-left: auto;
background: #212027;
text-align: center;
border-radius: 10upx;
padding: 15upx 0;
color: #FFFFFF;
display: flex;
align-items: center;
}
}
}
.footer {
position: fixed;
bottom: 30upx;
width: 100%;
.footer_but {
margin: auto;
color: #fff;
text-align: center;
line-height: 90upx;
width: 410upx;
height: 90upx;
background: linear-gradient(to right, #834DC4, #1983D7);
box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
border-radius: 50upx;
}
}
}
</style>