Skip to content

W
wechat_baking
Commit 0fc82f7d by huahua
Options

修改自定义页面

parent 44af7cee
Showing with 1523 additions and 122 deletions
App.vue
......@@ -7,7 +7,7 @@
num:0
},
onLaunch: function() {
// 字体列表
//字体列表
homeservice.queryList({
s: 'Material.fontFamilyList'
}).then(result => {
......
main.js
......@@ -19,7 +19,6 @@ Vue.prototype.$AppContext = AppContext
Vue.prototype.$Env = Env
Vue.prototype.$base = base
Vue.prototype.$http = http
App.mpType = 'app'
const app = new Vue({
......
pages.json
......@@ -47,6 +47,17 @@
"enablePullDownRefresh": true,
"navigationStyle": "custom"
}
},
{
"path": "size",
"style": {
"navigationBarTitleText": "自定义尺寸",
"enablePullDownRefresh": false,
"navigationBarTextStyle": "#ffffff",
"navigationBarBackgroundColor": "#101014",
"backgroundColor": "#101014"
//"navigationStyle": "custom"
}
}
]
},
......
pages/index/components/NumSlider.vue 0 → 100644
<template>
<view class="m-slider" ref="slider" :style="{width: width + 'px'}">
<view class="u-slider-rail"></view>
<view class="u-slider-track" :style="{left: left +'px', width: (right - left) +'px'}"></view>
<view style=" transform: translateX(-50%); " class="u-slider-handle" ref="right"
@touchstart.stop.prevent="onRightMouseDown" @touchmove.stop.prevent="onRightMouseMove"
:style="{left: right +'px'}">
<view style="color: #F29F3D; font-size: 30upx;"> {{defalutFilletData}} </view>
</view>
</view>
</template>
<script>
export default {
name: 'NumSlider',
props: {
min: { // 滑动输入条最小值
type: Number,
default: 0
},
max: { // 滑动输入条最大值
type: Number,
default: 100
},
initialMin: { // 滑动输入条初始最小值，默认在最左侧
type: Number,
default: 0
},
width: { // 滑动输入条在页面中的宽度
type: Number,
default: 600
},
disabled: { // 是否禁用
type: Boolean,
default: false
},
range: { // 是否双滑块模式
type: Boolean,
default: false
},
leftX: {
type: Number,
default: 120
},
defalutFillet: {
type: Number,
default: 0
},
},
data() {
return {
left: '', // 左滑块距离滑动条左端的距离
right: '', // 右滑动距离滑动条左端的距离
defalutFilletData: 0,
initialMax: 0,
filletScale: 1,
}
},
computed: {
scale() {
return this.width / (this.max - this.min)
},
low() {
return Math.round(this.left / this.scale + this.min)
},
high() {
return Math.round(this.right / this.scale + this.min)
}
},
watch: {
low(to) {
this.$emit('lowChange', to) // 左滑块对应数字回调
},
high(to) {
//右滑块对应数字回调
this.defalutFilletData = Math.floor(to * this.filletScale);
this.$emit('highChange', to)
}
},
mounted() {
this.left = this.range ? (this.initialMin - this.min) * this.scale : 0
this.right = (this.initialMax - this.min) * this.scale
},
methods: {
//初始化默认圆角
initFilletRadius(filletRadius, filletScale) {
//console.log("filletScale="+filletScale);
this.initialMax = filletRadius
this.filletScale = filletScale
this.left = this.range ? (this.initialMin - this.min) * this.scale : 0
this.right = (this.initialMax - this.min) * this.scale
this.defalutFilletData = Math.floor(filletRadius * filletScale)
},
onRightMouseMove(e) {
var moveX = e.changedTouches[0].pageX - this.leftX
if (moveX > this.width) {
this.right = this.width
} else if (moveX <= this.left) {
this.right = this.left
} else {
this.right = moveX
}
},
onRightMouseDown(e) { // 在滚动条上拖动右滑块
e.preventDefault();
var moveX = e.changedTouches[0].pageX - this.leftX
if (moveX > this.width) {
this.right = this.width
} else if (moveX <= this.left) {
this.right = this.left
} else {
this.right = moveX
}
},
init() {
this.left = this.range ? (this.initialMin - this.min) * this.scale : 0
this.right = (this.initialMax - this.min) * this.scale
},
},
}
</script>
<style lang="less" scoped>
@themeColor: #F29F3D;
.m-slider {
display: inline-block;
height: 4px;
padding: 6px 0;
position: relative;
z-index: 9;
.u-slider-rail {
position: absolute;
z-index: 99;
height: 4px;
width: 100%;
background: #f5f5f5;
border-radius: 2px;
}
.u-slider-track {
position: absolute;
z-index: 99;
background: #F29F3D;
border-radius: 4px;
height: 4px;
}
.u-slider-handle {
// 滑块
position: absolute;
z-index: 999;
width: 25px;
height: 25px;
line-height: 27px;
text-align: center;
top: -8px;
background: #fff;
border: 4px solid #F29F3D;
border-radius: 50%;
}
}
.disabled {}
</style>
pages/index/components/bgColor.vue
......@@ -60,6 +60,7 @@
};
},
mounted() {
},
methods: {
bgColorAssembly(item){
......
pages/index/index.vue
......@@ -24,15 +24,13 @@
<view :style="{width: data.bgWidth +'px',height: data.bgHeight +'px'}" style="position: relative; ">
<!-- <image :src="data.bgImage_old" mode="widthFix"
:style="{width: (data.bgWidth - 30) +'px',height: data.bgWidth +'px' ,left: '15px'}"
style="position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto;"></image>
-->
<!-- 底色 -->
<view :style="{width: data.editorWidth + 'px',height: data.editorHeight +'px',
background:background_color ? background_color : '#F5F5F5' ,borderRadius: isShowCircular ? '50%' : '0' }"
background:background_color ? background_color : '#F5F5F5' ,borderRadius: isShowCircular ? '50%' : defalutFillet + 'px' }"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1; ;">
</view>
......@@ -51,7 +49,7 @@
<!-- 主干 -->
<view :class="['item-list', { 'list-active': data.listActive == true }]"
style="opacity: 1;z-index: 1;"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',top: editory +'px',borderRadius: isShowCircular ? '50%' : '0' }">
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',top: editory +'px',borderRadius: isShowCircular ? '50%' : defalutFillet + 'px' }">
<view
:style="{'margin-top': (editor_top - (data.editorHeight * mix_scale / 2)) +'px',width: data.editorWidth * mix_scale +'px',height: data.editorHeight * mix_scale +'px','mask-image':shape_image ? 'url(' + shape_image + ')' : 'none', '-webkit-mask-image':shape_image ? 'url(' + shape_image + ')' : 'none',}"
style="overflow: hidden; mask-size: 100%; -webkit-mask-size: 100%;margin-left:auto; margin-right: auto;mask-repeat:no-repeat;-webkit-mask-repeat: no-repeat;">
......@@ -252,15 +250,6 @@
left:0upx;
z-index: 999;"></image>
<!-- display: flex;
justify-items: center;
align-items: center;
z-index: 99;
position: fixed;
bottom: 120upx;
left: 50%;
transform: translate(-50%, -50%); -->
<!-- 拖拽删除图库 -->
<view v-if="delete_wrap_state" class="delete-wrap" :class="{'delete-wrap-active':deleteWrap}"
:animation="animationData">
......@@ -321,7 +310,7 @@
<view class="tool_li_text">背景底色</view>
</view>
<view class="tool_li" @click="showone = !showone">
<view class="tool_li" @click="showone = !showone" v-if="diy_upload_menu == 1">
<image @click="cancel('share')" class="tool_li_img"
src="../../static/icon_make_diy_back_color.png" mode=""></image>
<view @click="cancel()" class="tool_li_text">上传相片</view>
......@@ -352,13 +341,6 @@
<view class="tool_li_text">清空底色</view>
</view>
<!-- <image v-if="isShowGif && !guide_left" src="../../static/img/icon_finger_stretch.gif" style="width: 450upx; height: 450upx; left:calc(50% - 225upx); position: fixed;
top: calc(50% - 225upx);
z-index: 1000;
display: flex;
align-items: center;" @click="oclikGifImage()" @touchstart="oclikGifImage()">
</image> -->
</view>
</view>
......@@ -777,6 +759,10 @@
isShowCircular: false, //是否圆形
real_width: "", //尺寸大小
goods_size_name: "", //尺寸名字
diy_upload_menu: 1, //diy_upload_menu为1是显示， diy_upload_menu为0时就不显示
isCustomize: false, //是否自定义
options: {},
defalutFillet:0,//默认圆角
};
},
......@@ -1199,9 +1185,13 @@
let top = 0
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (_this.data.editorWidth *_this.mix_scale) / image.width
let ratioheight = (_this.data.editorHeight * _this.mix_scale) /image.height
width = _this.data.editorWidth * _this.mix_scale
let ratiowidth = (_this.data.editorWidth *
_this.mix_scale) / image.width
let ratioheight = (_this.data
.editorHeight * _this.mix_scale) /
image.height
width = _this.data.editorWidth * _this
.mix_scale
height = image.height * ratiowidth
_this.isShowGif = true;
......@@ -1328,24 +1318,6 @@
});
var that = this
if (this.machine_id != undefined && this.machine_id != null && this.machine_id != '') {
// 判断设备是否正常
that.isComeDelivery = false;
// 判断设备是否正常
homeservice.WorksList({
s: 'machine.detail',
//s: 'machine.newDetail',
machine_id: this.machine_id
}).then(res => {
that.machine_item = res
//判断配送版
if (res.delivery == 1 && res.machine_category_id == "64") {
//this.key = 1;
this.isComeDelivery = true;
} //key:null,//1直营配送站 2 万能通用版 3色彩自助站
this.support_pay = res.support_pay //单机版是否支付
// 先登陆
uni.login({
provider: 'weixin',
......@@ -1367,12 +1339,12 @@
})
}
});
}).catch(err => {
uni.showToast({
title: '当前打印站正在维护',
icon: 'none'
});
});
// }).catch(err => {
// uni.showToast({
// title: '当前打印站正在维护',
// icon: 'none'
// });
// });
} else {
uni.showToast({
title: '啊嘞，色彩定制站必须扫码才能使用',
......@@ -1465,8 +1437,10 @@
comlist.has_corner = 0;
}
//新添加的参数
comlist.image_left = item.image_left ? (item.image_left + item.left) / widScale : (left /widScale) // 图片的x
comlist.image_top = item.image_top ? (item.image_top + item.top) / heiScale : (top /heiScale) // 图片的y
comlist.image_left = item.image_left ? (item.image_left + item.left) / widScale : (left /
widScale) // 图片的x
comlist.image_top = item.image_top ? (item.image_top + item.top) / heiScale : (top /
heiScale) // 图片的y
comlist.image_width = item.initialWidth * item.initialScale / widScale // 图片宽度
comlist.image_height = item.initialHeight * item.initialScale / heiScale // 图片高度
}
......@@ -1842,7 +1816,8 @@
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (this.data.editorWidth * this.mix_scale) / image.width
let ratioheight = (this.data.editorHeight * this.mix_scale) / image.height
let ratioheight = (this.data.editorHeight * this.mix_scale) / image
.height
let resultmix_scale = result.mix_scale || 1
// if (ratio >= 1) { //长方形
width = this.data.editorWidth * this.mix_scale * resultmix_scale
......@@ -3029,7 +3004,8 @@
item.activehorn = true // 角状态
item.activeedge = true // 边状态
//赋值
drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos,item)
drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos,
item)
this.saveSnapshot();
},
/* 部件旋转结束事件*/
......@@ -3200,7 +3176,6 @@
var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect();
query.exec(function(res) {
/* console.log(res) */
var width = res[0].width;
var rate = item.width / width;
var tmpSize = item.font_size * rate;
......@@ -3223,7 +3198,6 @@
},
async text_await(e) {
// 获取当前选中的部件
var item = items[index];
if (e.detail.value != item.content) {
......@@ -3331,6 +3305,101 @@
});
},
//获取自定义产品数据详情
getCustomDetail() {
this.front_image_long = false
homeservice.queryList({
s: 'Product.detail',
id: this.data.goods_id
}).then(result => {
this.titlename = result.name + " " + this.titlename //修改头部名称
//console.log("this.titlename=" + result.name)
//读取背景图
uni.getImageInfo({
src: result.front_image_old,
success: (front_image) => {
// this.data.bgHeight = (front_image.height + 600) * (this.data.bgWidth / front_image.width) // 画布高度
this.data.bgHeight = this.data.bgHeight // 画布高度
this.editory = (this.data.bgHeight - (result.design_height * this.data
.pixelRate)) / 2; //辅助线距离
// 设计区放大高度比率
this.front_image_long = true
}
})
// console.log(this.options);
let pixel_scale = 1
if (this.options.WidthIndex > (this.data.windowWidth * this.data.pixelRate)) {
pixel_scale = (this.data.windowWidth * this.data.pixelRate) / this.options.WidthIndex
} else {
if (this.options.WidthIndex < (this.data.windowWidth * this.data.pixelRate) && this.options.HeightIndex < (this.data.windowHeight * this.data.pixelRate)) {
pixel_scale = 1
}
}
// console.log("pixel_scale=" + pixel_scale);
if (this.options.HeightIndex > (this.data.windowHeight * this.data.pixelRate)) {
if ((this.data.windowHeight * this.data.pixelRate) / this.options.HeightIndex < pixel_scale) {
pixel_scale = (this.data.windowHeight * this.data.pixelRate) / this.options.HeightIndex
}
} else {
if (this.options.WidthIndex < (this.data.windowWidth * this.data.pixelRate) && this.options.HeightIndex < (this.data.windowHeight * this.data.pixelRate)) {
pixel_scale = 1
}
}
this.design_width = (this.options.WidthIndex * pixel_scale) / this.data.pixelRate // 设计宽度
this.design_height = (this.options.HeightIndex * pixel_scale) / this.data.pixelRate // 设计高度
//this.design_height = result.design_height // 设计高度
//this.design_width = result.design_width // 设计宽度
this.data.editorWidth = this.design_width * this.data.pixelRate // 设计宽度
this.data.editorHeight = this.design_height * this.data.pixelRate // 设计高度
this.editor_top = this.data.editorHeight * Number(this.location_scale) //辅助线距离
this.design_widthrate = (this.design_width / this.print_width) // 设计区放大宽度比率
this.design_heightrate = (this.design_height / this.print_height)
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
this.data.bgImage_thumbnail = result.thumbnail // 介绍图片（主图遮罩）
this.design_color = result.design_color // 背景颜色
this.mix_scale = result.mix_scale //上传图片比率
//this.design_height = result.design_height // 设计高度
//this.design_width = result.design_width // 设计宽度
this.print_height = result.print_height // 设计基础宽度
this.print_width = result.print_width // 设计基础高度
this.center_scale = result.center_scale //设计器中心点位置对应底图高度占比（居中=0.5）
this.location_scale = result.location_scale //参考线中心点对应设计器高度占比（居中=0.5）
if (this.options.defalutFillet != "0" && this.options
.defalutFillet >= 0) {
let defalutFilletScale = this.data.editorWidth /
this.options.real_width;
this.defalutFillet = this.options.defalutFillet *
defalutFilletScale
} else {
this.defalutFillet = 0;
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
//获取产品详情数据
goodslist() {
this.front_image_long = false
......@@ -3364,9 +3433,10 @@
}
})
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
//this.data.bgImage_old = result.front_image;
this.data.bgImage_thumbnail = result.thumbnail // 介绍图片（主图遮罩）
this.design_color = result.design_color // 背景颜色
......@@ -3427,7 +3497,6 @@
});
},
itemlongtap(e) { //长按事件
var item = items[index]; // 获取当前选中的部件
// if(!this.isRotate && this.system_config.golf_diy.value == 1){
......@@ -3449,7 +3518,19 @@
this.goods_size_name = options.title;
this.real_width = options.real_width
this.data.goods_id = options.good_id;
this.options = options;
let that = this;
//console.log(options);
if (options.type) {
if (options.type == 2) {
this.isCustomize = true;
} else {
this.isCustomize = false;
}
}
wx.createSelectorQuery().select('.delete-wrap').boundingClientRect(function(rect) {
if (rect != null) {
that.setData({
......@@ -3477,7 +3558,8 @@
} else {
that.isShowGif = false;
var curTime = e.timeStamp
var lastTime = e.currentTarget.dataset.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
var lastTime = e.currentTarget.dataset
.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
if (curTime - lastTime > 0) {
if (curTime - lastTime < 300) { //是双击事件
if (items[index].type == 0) {
......@@ -3485,7 +3567,7 @@
that.$refs.index.init();
}
} else {
// 点击选中部件
//点击选中部件
that.itemClick(e);
}
}
......@@ -3506,14 +3588,14 @@
that.dragEnd(e)
let item = items[index];
if (item.scale != 1) {
// 初始化的位置
//初始化的位置
drag.initPosscale(item)
drag.getTransferPositionangle(item.left, item.top, item.width, item.height, item.angle,
item.centerPos, item)
// 缩放
//缩放
item.scale = 1;
item.lastScale = 1
// //图片放大响应的右下角按钮同比缩小
//图片放大响应的右下角按钮同比缩小
item.oScale = 1 / item.scale;
}
//底部删除框出现动画
......@@ -3589,9 +3671,28 @@
that.data.bgHeight = res.windowHeight // (861 / 1196) // 画布高度 高度比率 * (861 / 1196)
that.data.pixelRate = pixelRate // 屏幕宽度比率
that.machine_id = options.machine_id || null // 设备id
homeservice.WorksList({
s: 'machine.detail',
//s: 'machine.newDetail',
machine_id: that.machine_id
}).then(res => {
that.machine_item = res
that.diy_upload_menu = res.diy_upload_menu
//判断配送版
if (res.delivery == 1 && res.machine_category_id == "64") {
that.isComeDelivery = true;
} //key:null,//1直营配送站 2 万能通用版 3色彩自助站
that.support_pay = res.support_pay //单机版是否支付
}).catch(err => {});
that.queryPage.machine_id = options.machine_id || null // 设备id
that.key = 2
if (that.isCustomize) {
that.getCustomDetail();
} else {
that.goodslist() // 获取产品详情数据
}
//that.goodslist() // 获取产品详情数据
that.category() // 作品分类 贴图分类
}
})
......
pages/index/js/drag.js
......@@ -581,10 +581,12 @@ const drag = {
},
/**
* 图片拖动中事件
*/
dragMove(e, item, data, editor_top, allLineListData, margin_left, editory) {
dragMove(e, item, data, editor_top) {
item.isShowLineV = false;
item.isShowLineH = false;
......
pages/index/machineDetail.vue
<template>
<view class="full-width full-height">
<!-- 自定义头部 -->
<myhead :worksid="worksid" :title="myheadtext" :color="'#fff'" :titleShow="true" :backShow="true" :isBack ="true"
<myhead :worksid="worksid" :title="myheadtext" :color="'#fff'" :titleShow="true" :backShow="true" :isBack="true"
:background="'none'"></myhead>
<view style="position: relative;width: 100%; height: 100%; z-index: 2;">
......@@ -30,7 +30,9 @@
background: linear-gradient(92deg, #E6B01A, #F29F3D);
box-shadow: 0px 19px 48px 1px rgba(20, 31, 62, 0.35);
border-radius: 40px;">
<view style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">立即定制</view>
<view
style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
立即定制</view>
</view>
</view>
......@@ -57,6 +59,7 @@
<text style="font-size: 22upx;">深圳市瑞丰彩科技有限公司</text>
</view>
</view>
<!-- 登录弹框 -->
<Signin ref="Signin"></Signin>
......@@ -65,7 +68,7 @@
<image src="../../static/liebiao.png" mode="" style="width: 243upx; height: 123upx;"></image>
</view>
<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem"></switchGoods>
<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem" @toCustomSize="toCustomSize"></switchGoods>
<!--//商品弹框 -->
</view>
......@@ -108,6 +111,17 @@
methods: {
//自定义尺寸
toCustomSize() {
uni.navigateTo({
url: '../mall/size?machine_id=' + this.machine_id +
// + "&title=" + item.title + "&real_width=" + item.key +
"&machineDetail=" + JSON.stringify(this.list)
// url: '../index/size?machine_id=' + this.machine_id +
// '&key=' + this.key;
})
},
//去排队列表
toLineList() {
if (!this.$AppContext.checkLogin()) {
......@@ -121,11 +135,14 @@
//选择商品进来
selectGoodItem(item) {
uni.navigateTo({
url: '../index/index?machine_id=' + this.machine_id + "&good_id=" + item.id + "&title=" + item.title + "&real_width=" + item.key,
url: '../index/index?machine_id=' + this.machine_id +
"&good_id=" + item.id +
"&title=" + item.title +
"&real_width=" + item.key +
"&machineDetail=" + JSON.stringify(this.list) +
"&type = 1"
})
},
//立即定制
......@@ -134,7 +151,8 @@
if (!this.$AppContext.checkLogin()) {
this.tologo(1)
} else {
this.$refs['switchGoods'].open(this.machine_id);
let isShowCustomizeData = this.list.customize_size == 1 ? true : false
this.$refs['switchGoods'].open(this.machine_id,isShowCustomizeData);
}
},
......@@ -171,8 +189,6 @@
s: 'Init.init',
code: res.code
}).then(r => {
//console.log("进来")
//that.getDetail();
if (type == 1) {
that.$refs['switchGoods'].open(that.machine_id);
} else {
......@@ -258,7 +274,7 @@
//分享转发
onShareAppMessage(options) {
var that = this;
// 设置转发内容
//设置转发内容
var shareObj = {
title: this.$Env.getmalltext(),
path: '/pages/mall/machineDetail?machine_id=' + this.machine_id, // 默认是当前页面，必须是以‘/’开头的完整路径
......@@ -278,12 +294,16 @@
this.$base.machine_id = this.machine_id
this.statusloading = 1;
this.Adlist() // 轮播图
//this.getDetail();
this.getDetail();
},
onShow() {},
onShow() {
this.getDetail();
},
onHide() {}
onHide() {
}
};
</script>
......
pages/index/mall.vue
......@@ -81,7 +81,7 @@
success: function(res) {
console.log(res)
if (res.scanType == 'QR_CODE') {
if (that.getQueryString(res.result, 'machine_id') && that.getQueryString(res.path, 'machine_id') != "" && that.getQueryString(res.result, 'machine_id') != null && that.getQueryString(res.result,'machine_id') != "null") {
if (that.getQueryString(res.result, 'machine_id') && that.getQueryString(res.result, 'machine_id') != "" && that.getQueryString(res.result, 'machine_id') != null && that.getQueryString(res.result,'machine_id') != "null") {
uni.navigateTo({
url: '../index/machineDetail?machine_id=' + that
.getQueryString(
......@@ -97,7 +97,7 @@
} else {
if (res.path) {
if (that.getQueryString(res.path, 'machine_id') && that.getQueryString(res.path, 'machine_id') != "" && that.getQueryString(res
.result, 'machine_id') != null && that.getQueryString(res.result,'machine_id') != "null") {
.path, 'machine_id') != null && that.getQueryString(res.path,'machine_id') != "null") {
uni.navigateTo({
url: '../index/machineDetail?machine_id=' + that
.getQueryString(res.path, 'machine_id')
......
pages/index/switchGoods.vue
......@@ -7,7 +7,7 @@
</view>
<view
style=" width: 562upx; border-radius: 20upx; height: 742upx; z-index: 998; position: absolute ;margin:auto; top:0; right: 0; left: 0; bottom: 0;flex-direction: column">
style=" width: 562upx; border-radius: 20upx; height: 900upx; z-index: 998; position: absolute ;margin:auto; top:0; right: 0; left: 0; bottom: 0;flex-direction: column">
<image src="../../static/icon_home_good_back.png" style="width: 562upx; border-radius: 20upx;
height: 720upx;
......@@ -36,9 +36,9 @@
border-radius: 15upx;
position: relative;
width: 180upx">
<image mode="center"
<image mode="widthFix"
:class="[goodCurrentIndexTop == index? 'good-item-select':'good-item-no-select' ]"
:src="item.goods_pic + '?x-oss-process=image/resize,lfit,w_210'"></image>
:src="item.goods_pic + '?x-oss-process=image/resize,lfit,w_180'"></image>
<view style="text-align: center; font-size: 30upx; width: 100%;
color:#000; margin-top: 30upx;">
{{item !=null ? item.name : ''}}
......@@ -70,8 +70,16 @@
margin: 0 auto;
line-height: 84upx;
margin-top:60upx;
text-align: center;"> 确定</view>
text-align: center;">确定</view>
<view @click="toCustomSize()" style="width: 289upx;
height: 84upx;
color: #F29F3D;
font-size: 32upx;
margin: 0 auto;
line-height: 84upx;
margin-top:20upx;
text-align: center;"> 自定义</view>
</view>
</view>
......@@ -90,12 +98,20 @@
goodCurrentIndexTop: 0, //上面商品选中
sizeCurrentIndexTop: 0, //下面尺寸选中
selectGoodSize: null, //选中商品尺寸
isShowCustomize: true, //是否自定义选中
};
},
mounted() {},
methods: {
//自定义尺寸
toCustomSize() {
this.isShow = false;
this.$emit('toCustomSize');
},
//保存商品
saveGood() {
if (this.selectGood == null) {
......@@ -106,7 +122,6 @@
}
this.isShow = false;
this.goodtext = this.selectGoodSize.title //选择商品名
//console.log("this.goodtext="+this.goodtext);
this.$emit('selectGoodItem', {
id: this.selectGood.id,
title: this.goodtext,
......@@ -136,7 +151,12 @@
},
//打开页面
open(machineId) {
open(machineId, isShowCustomize) {
if (isShowCustomize) {
this.isShowCustomize = isShowCustomize
} else {
this.isShowCustomize = false
}
this.machine_id = machineId;
this.getGooods();
},
......@@ -151,9 +171,11 @@
this.goods = result.goods;
if (this.goods != null && this.goods.length > 0) {
this.selectGood = this.goods[0];
this.goodCurrentIndexTop = 0; //上面商品选中
}
if (this.selectGood.attribute && this.selectGood.attribute.length > 0) {
this.selectGoodSize = this.selectGood.attribute[0];
this.sizeCurrentIndexTop = 0; //下面尺寸选中
}
if (this.goods == null || this.goods.length == 0) {
this.isShow = false;
......
pages/mall/size.vue 0 → 100644
<template>
<view class="edit-address full-height full-width">
<!-- <myhead :title="'自定义尺寸'" :color="'#131319'" :titleShow="true" :backShow="true" :background="'#fff'"></myhead> -->
<view class="form full-width">
<view style="width: 100%; height: 85upx; display: flex;align-items: center; justify-content: center; ">
<view style="display: flex;font-size: 30upx; margin:auto;
width: 300upx; height: 70upx; background: #282932; border-radius: 50upx; color: #FFFFFF;">
<view :class="{'previewAxtiveLeft':!preview}" @click=" onclickTitle(false) "
style="line-height: 70upx; text-align: center; width: 150upx;">
自定义
</view>
<view :class="{'previewAxtiveRight':preview}" @click="onclickTitle(true) "
style="line-height: 70upx; text-align: center; width: 150upx;">
预置尺寸
</view>
</view>
</view>
<!-- 宽{{pixel_Width}}高:{{pixel_Height}}比例{{pixel_scale}} -->
<!-- {{pixel_scale}}{{pixel_Width}} -->
<view v-if="!preview" class="full-width" scroll-y style="height: calc(100% - 160upx);overflow: scroll;">
<view style=" max-height: 630upx; height: 630upx; overflow: scroll;
overflow: hidden;
margin:0 auto 47upx;display: flex;
justify-content: center; align-items: center; "
:style="{width: (pixel_Width * pixel_scale) +'px', borderRadius: defalutFillet + 'px'}">
<view
:style="{width: (pixel_Width * pixel_scale) +'px',height: (pixel_Height * pixel_scale) +'px', borderRadius: defalutFillet + 'px'}"
style="background: #FFFFFF; margin:auto; box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);">
</view>
</view>
<view style="position: relative;">
<!-- 自定义高度 -->
<view style="display: flex; align-items: center; justify-content: center; margin-top: 10upx;">
<view style="font-size: 30upx; font-weight: 400; color: #FFFFFF; width: 180upx;">物料宽度：</view>
<view style="width: 282upx; height: 66upx; background: #282932; border-radius: 30upx;
display: flex; align-items: center;">
<input type="digit" placeholder="请输入宽度" @input="moneyChangeWidth" :value="inputWidth"
style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: 200upx;" />
<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
</view>
</view>
<view
style="display: flex; align-items: center; justify-content: center; margin-top: 20upx; position: relative;">
<view style="font-size: 30upx; font-weight: 400; color: #FFFFFF; width: 180upx;">物料高度：</view>
<view style="width: 282upx; height: 66upx; background: #282932; border-radius: 30upx;
display: flex; align-items: center;">
<input type="digit" :value="inputHeight" placeholder="请输入高度" @input="moneyChangeHeight"
style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: 200upx;" />
<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
</view>
</view>
<view style="display: flex; align-items: center;justify-content: center; margin-top: 25upx;">
<view style="font-size: 30upx; font-weight: 400; color: #FFFFFF; width: 180upx;">圆角半径：</view>
<view style="width: 282upx; 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="sliderdefaultWith" />
</view>
</view>
</view>
</view>
<!-- 预置 -->
<view v-if="preview" class="full-width">
<view
style="height: 90upx; display: flex; align-items: center;width: calc(100% - 60upx); margin: auto;">
<view style="display: flex;align-items: center; font-size: 28upx;">
<view :class="{'classificationLeft':!Specifications}" @click="OnclickSpecifications(0)" style="line-height: 60upx; text-align: center; width: 131upx;
height: 60upx; background: #282932; border-radius: 30upx;">
内置
</view>
<view :class="{'classificationRight':Specifications}" @click="OnclickSpecifications(1)" style="line-height: 60upx; text-align: center; width: 131upx; margin-left: 20upx;
height: 60upx; background: #282932; border-radius: 30upx;">
常用
</view>
</view>
</view>
<view class="full-width">
<!-- 动态数据 -->
<view scroll-y @scrolltolower="loadMore()" class="full-width">
<view v-for="(item, index) in LoupanList" :key="index" class="eq_list"
@click.preven="refundNumorder(item)" @touchstart.preven="touchstart(item,index)"
@touchend.prevent="touchend">
<view class="eq_list_div">
<view style="font-size: 30upx;font-weight: 500;">{{item.name}}</view>
<view style="margin-left: auto; margin-right: 20upx;">
<label class="fa fa-angle-right align-right sub-color"
style="font-size: 40upx;"></label>
</view>
</view>
</view>
<!-- 暂无相关信息 -->
<view class="align-center content-color"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
v-if="LoupanList.length == 0 || LoupanList.length == null">
<span class="iconfont icon-wushuju"
style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 23upx;">
暂无相关信息</view>
</view>
</view>
<!-- 动态数据完 -->
</view>
<!-- 返回顶部 -->
<view class="to-top content-color" @click="totop()">
<view class="fa fa-angle-right to-top-icon"></view>
</view>
</view>
</view>
<mpvue-picker ref="mpvuePicker" :themeColor="'#53B2B0'" :mode="mode" :pickerValueDefault="pickerValueDefault"
@onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray">
</mpvue-picker>
<view class="footer" v-if="!preview">
<view class="footer_but" hover-class="hover-class-bg" @click="onSave()">确认定制</view>
</view>
</view>
</template>
<script>
import Enums from '@/util/Enums';
import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
import userService from '@/service/UserService';
import homeservice from '@/service/homeservice.js';
import uniPopup from '../index/common/uni-popup/uni-popup.vue';
import NumSlider from '../index/components/NumSlider.vue'
import myhead from './head/head.vue'; // 页眉
export default {
components: {
mpvuePicker,
uniPopup,
NumSlider,
myhead
},
computed: {
},
data() {
return {
mode: 'selector',
pickerValueArray: [{
label: '毫米',
value: 0
},
{
label: '厘米',
value: 1
}
],
pickerValueDefault: [0],
companyValue: '毫米',
equalRatioState: false, //固定宽高比率
directionState: false, //横屏竖屏
wValue: 0, //固定宽高比率计算
hValue: 0, //固定宽高比率计算
previewWidth: 0, //基础
previewHeight: 0, //基础
inputWidth: 100, //文本框显示数据
inputHeight: 100, //文本框显示数据
pixel_Width: 0, //实际像素
pixel_Height: 0, //实际像素
pixel_scale: 1, //自动缩放屏幕比率，防止超出屏幕
convert_rate: 10, //毫米和像素的转换比率
OldConvert_rate: 10, //最大值是 210mm*297mm 毫米-像素的转换比率(接口获取数据记录保存下来)
render_cove_width: 0, //最大宽度
render_cove_height: 0, //最大高度
data: {
windowWidth: null, // 屏幕宽度
windowHeight: null, // 屏幕高度
pixelRate: null // 屏幕宽度比率
},
preview: false, //自定义预览
//上拉状态
dataLoadState: {
pullDownRefresh: false,
reachBottom: false
},
LoupanList: [],
Specifications: false, //预置分类
//判断是否为长按
nav: true,
Loop: null,
good: null,
parameter: {
machine_id: null,
goods_id: null,
key: null
},
manyGoodSelectData: [], //查询更多商品
type: 1, //类型 1 自定义 2 选择列表
selectItemData: null, // 选中对象
sliderdefaultWith: 120,
defalutFillet: 0, //默认圆角大小
initialMax: 0,
heiPixelRate: null, //屏幕宽度比率
filletScale: 1, //比例
newDefalutFilletData: 0,
headheight: 0, //头部高度
queryPage: {
},
good_id: "217", //产品Id
}
},
methods: {
onclickTitle(preview) {
this.preview = preview
if (this.preview) {
this.defalutFillet = 0
this.newDefalutFilletData = 0;
}
},
//调转明细界面
toGoodDetail() {
uni.navigateTo({
url: '../index/goodDetail?machine_id=' + this.parameter.machine_id + "&goodTypeData= 2"
});
},
//开关控制圆角
switchChange(e) {
if (e.detail.value == true) {
this.switchIsFillet = true;
} else {
this.switchIsFillet = false;
}
},
highChange(val, value) {
this.newDefalutFilletData = val;
let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale / this
.inputWidth))
},
//显示商品弹框
showManyGoodPop() {
this.$refs['showManyGood'].open();
},
//显示商品弹框
closeManyGoodPop() {
this.$refs["showManyGood"].close();
},
refundNumorder(item) {
// if (this.manyGoodSelectData != null && this.manyGoodSelectData != '' && this.manyGoodSelectData.length >
// 1) {
// this.selectItemData = item
// this.type = 2
// this.showManyGoodPop();
// return
// }
// if (this.nav) {
let real_radius = Number(item.real_radius);
let real_height = Number(item.real_height);
let real_width = Number(item.real_width);
//判断是否超过对应宽高比
let minWidthAanHeight = 0;
if (real_height > real_width) {
minWidthAanHeight = real_width
} else {
minWidthAanHeight = real_height
}
if (real_radius > minWidthAanHeight / 2) {
real_radius = Math.floor(minWidthAanHeight / 2)
}
uni.navigateTo({
url: '../index/index?machine_id=' + this.parameter.machine_id +
'&WidthIndex=' + item.width + '&HeightIndex=' + item.height +
'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + item.unit +
'&name=' + item.name + '&pixel_scale=' + this.pixel_scale +
'&real_width=' + item.real_width +
'&real_height=' + item.real_height +
"&defalutFillet=" + real_radius +
"&good_id=" + this.good_id+
"&type=2"
})
// }
},
onSave() {
if (this.inputWidth == "") {
uni.showToast({
title: "宽度不能为空",
icon: 'none'
});
return;
}
if (this.inputHeight == "") {
uni.showToast({
title: "高度不能为空",
icon: 'none'
});
return;
}
// if (this.manyGoodSelectData != null && this.manyGoodSelectData != '' && this.manyGoodSelectData.length >
// 1) {
// this.type = 1;
// this.showManyGoodPop();
// return
// }
//创建或者更新画布信息
let unit = null
let real_width = null
let real_height = null
if (this.companyValue == '毫米') {
unit = 'mm'
real_width = this.inputWidth
real_height = this.inputHeight
} else if (this.companyValue == '厘米') {
unit = 'cm'
real_width = this.inputWidth
real_height = this.inputHeight
}
//210 X 297 - 8 （毫米
let nameStr = real_width + ' x ' + real_height + '（' + this.companyValue + '）';
let defalutFilletData = Math.floor(this.newDefalutFilletData * this.filletScale);
if (defalutFilletData > 0) {
nameStr = real_width + ' x ' + real_height + ' - ' + defalutFilletData + '（' + this.companyValue + '）';
}
let WidthIndex = real_width * this.OldConvert_rate
let HeightIndex = real_height * this.OldConvert_rate
//判断是否超过对应宽高比
let minWidthAanHeight = 0;
if (this.inputHeight > this.inputWidth) {
minWidthAanHeight = this.inputWidth
} else {
minWidthAanHeight = this.inputHeight
}
if (defalutFilletData > minWidthAanHeight / 2) {
defalutFilletData = Math.floor(minWidthAanHeight / 2)
}
// url: '../index/index?machine_id=' + this.machine_id +
// "&good_id=" + item.id +
// "&title=" + item.title +
// "&real_width=" + item.key +
// "&machineDetail=" + JSON.stringify(this.list) +
// "&type = 1"
uni.redirectTo({
url: '../index/index?machine_id=' + this.parameter.machine_id +
'&WidthIndex=' + WidthIndex + '&HeightIndex=' + HeightIndex +
'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + unit +
'&title=' + nameStr +
'&pixel_scale=' + this.pixel_scale +
'&real_width=' + real_width +
'&real_height=' + real_height +
"&defalutFillet=" + defalutFilletData +
"&good_id=" + this.good_id +
"&type=2"
})
// homeservice.newqueryList({
// s: 'CanvasSize.save',
// id: null,
// name: nameStr,
// real_width: real_width,
// real_height: real_height,
// unit: unit,
// real_radius: defalutFilletData
// }).then(result => {
// uni.showToast({
// icon: "success",
// title: '创建成功!',
// duration: 2000
// });
// let WidthIndex = real_width * this.OldConvert_rate
// let HeightIndex = real_height * this.OldConvert_rate
// //判断是否超过对应宽高比
// let minWidthAanHeight = 0;
// if (this.inputHeight > this.inputWidth) {
// minWidthAanHeight = this.inputWidth
// } else {
// minWidthAanHeight = this.inputHeight
// }
// if (defalutFilletData > minWidthAanHeight / 2) {
// defalutFilletData = Math.floor(minWidthAanHeight / 2)
// }
// uni.navigateTo({
// url: '../index/index?machine_id=' + this.parameter.machine_id +
// '&WidthIndex=' + WidthIndex + '&HeightIndex=' + HeightIndex +
// '&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + unit +
// '&name=' + nameStr +
// '&pixel_scale=' + this.pixel_scale +
// '&real_width=' + real_width +
// '&real_height=' + real_height +
// "&type = 1" +
// "&defalutFillet=" + defalutFilletData
// })
// }).catch(err => {
// uni.showToast({
// title: err.msg,
// icon: 'none'
// });
// });
},
touchstart(item, index) {
let that = this;
that.nav = true
clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
this.Loop = setTimeout(function() {
that.nav = false
console.log(that.nav)
uni.showModal({
title: '删除',
content: '确认要删除当前尺码吗？',
confirmText: '删除',
confirmColor: '#ff3b32',
success: async function(res) {
if (res.confirm) {
that.LoupanList.splice(index, 1)
homeservice.newqueryList({
s: 'CanvasSize.del',
ids: item.id
}).then(result => {
uni.showToast({
icon: "success",
title: '删除成功!',
duration: 2000
});
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
} else if (res.cancel) {
// console.log('用户点击取消')
}
}
});
}.bind(this), 500);
},
touchend() {
clearInterval(this.Loop);
},
OnclickSpecifications(e) {
this.dataLoadState = {
pullDownRefresh: false,
reachBottom: false
}
this.LoupanList = []
this.queryPage.page = 1;
this.queryPage.total = 0;
if (e == 0) {
this.Specifications = false
this.queryPage.s = 'CanvasSize.list'
} else {
this.Specifications = true
this.queryPage.s = 'CanvasSize.mylist'
}
this.loadGoodsList(Enums.DATA_DIRECTION.UP);
},
direction() { //横屏竖屏
this.directionState = !this.directionState
// 赋值
let w = this.pixel_Width
let h = this.pixel_Height
this.pixel_Width = h
this.pixel_Height = w
// if(this.companyValue == '毫米'){
// this.inputWidth = h / this.convert_rate
// this.inputHeight = w / this.convert_rate
// }else if(this.companyValue == '厘米'){
this.inputWidth = h / this.convert_rate
this.inputHeight = w / this.convert_rate
// }
//固定比率
this.wValue = h
this.hValue = w
},
equalRatio() { //固定比率
this.equalRatioState = !this.equalRatioState
//固定比率
this.wValue = this.pixel_Width
this.hValue = this.pixel_Height
},
// 确定 e.value[0]
onConfirm(e) {
if (this.companyValue == e.label) {
return
}
this.companyValue = e.label
if (e.value[0] == 0) { //毫米
this.convert_rate = this.OldConvert_rate
} else if (e.value[0] == 1) { //厘米
this.convert_rate = this.OldConvert_rate * 10
}
// 赋值
this.inputHeight = this.previewHeight / this.convert_rate
this.inputWidth = this.previewWidth / this.convert_rate
this.setData({
inputWidth: this.previewWidth / this.convert_rate
})
this.setData({
inputHeight: this.previewHeight / this.convert_rate
})
},
moneyChangeWidth(event) {
let Width = this.moneyone(event.detail.value);
let Height = null
// 赋值
this.setData({
inputWidth: Width
}); //文本
if (this.equalRatioState) { //固定宽高比率
this.setData({
inputHeight: (Width / (this.wValue / this.hValue)).toFixed(2)
}); //文本
Height = (Width / (this.wValue / this.hValue)).toFixed(2)
} else { //随便输入
this.setData({
inputHeight: this.inputHeight
}) //文本
}
if (Number(Width) > (Number(this.render_cove_width) / this.convert_rate)) {
Width = (Number(this.render_cove_width) / this.convert_rate) //最大值
this.setData({
inputWidth: Width
}); //赋值文本
uni.showToast({
icon: "success",
title: '宽度最大值' + Width,
duration: 2000
});
}
if (Number(Height) > (Number(this.render_cove_height) / this.convert_rate)) {
Height = (Number(this.render_cove_height) / this.convert_rate)
this.setData({
inputHeight: Height
}); //文本
}
this.previewWidth = this.inputWidth * this.convert_rate
this.previewHeight = this.inputHeight * this.convert_rate
this.pixel_Width = this.previewWidth
this.pixel_Height = this.previewHeight
if (this.pixel_Width > (this.data.windowWidth * 0.5)) {
this.pixel_scale = (this.data.windowWidth * 0.5) / this.pixel_Width
} else {
if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
.windowHeight * 0.5)) {
this.pixel_scale = 1
}
}
if (this.pixel_Height > (this.data.windowHeight * 0.5)) {
if ((this.data.windowHeight * 0.5) / this.pixel_Height < this
.pixel_scale) {
this.pixel_scale = (this.data.windowHeight * 0.5) / this.pixel_Height
}
} else {
if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
.windowHeight * this.pixelScale)) {
this.pixel_scale = 1
}
}
let real_width = Number(this.inputWidth);
let real_height = Number(this.inputHeight);
if (real_width > real_height) {
this.filletScale = real_width / 100;
} else {
this.filletScale = real_height / 100;
}
let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale / this
.inputWidth));
this.$refs['NumSlider'].initFilletRadius(this.newDefalutFilletData, this.filletScale);
return Width
},
moneyChangeHeight(event) {
let Width = null;
let Height = this.moneyone(event.detail.value);
this.setData({
inputHeight: Height
}) //文本
if (this.equalRatioState) { //固定宽高比率
this.setData({
inputWidth: (Height / (this.hValue / this.wValue)).toFixed(2)
});
Width = (Height / (this.hValue / this.wValue)).toFixed(2)
} else { //随便输入
this.setData({
inputWidth: this.inputWidth
}); //文本
}
if (Number(Width) > (Number(this.render_cove_width) / this.convert_rate)) {
Width = (Number(this.render_cove_width) / this.convert_rate) //最大值
this.setData({
inputWidth: Width
}); //赋值文本
}
if (Number(Height) > (Number(this.render_cove_height) / this.convert_rate)) {
Height = (Number(this.render_cove_height) / this.convert_rate)
this.setData({
inputHeight: Height
}); //文本
uni.showToast({
icon: "success",
title: '高度最大值' + Height,
duration: 2000
});
}
this.previewWidth = this.inputWidth * this.convert_rate
this.previewHeight = this.inputHeight * this.convert_rate
this.pixel_Width = this.previewWidth
this.pixel_Height = this.previewHeight
if (this.pixel_Width > (this.data.windowWidth * 0.5)) {
this.pixel_scale = (this.data.windowWidth * 0.5) / this.pixel_Width
} else {
if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
.windowHeight * 0.5)) {
this.pixel_scale = 1
}
}
if (this.pixel_Height > (this.data.windowHeight * 0.5)) {
if ((this.data.windowHeight * 0.5) / this.pixel_Height < this
.pixel_scale) {
this.pixel_scale = (this.data.windowHeight * 0.5) / this.pixel_Height
}
} else {
if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
.windowHeight * this.pixelScale)) {
this.pixel_scale = 1
}
}
let real_width = Number(this.inputWidth);
let real_height = Number(this.inputHeight);
if (real_width > real_height) {
this.filletScale = real_width / 100;
} else {
this.filletScale = real_height / 100;
}
// console.log("this.filletScale=" + this.filletScale + "defalutFillet=" + this.defalutFillet)
let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale / this
.inputWidth));
this.$refs['NumSlider'].initFilletRadius(this.newDefalutFilletData, this.filletScale);
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];
})
});
},
//验证输入金额
moneyone(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
},
onChange(e) {
},
onCancel(e) {
},
loadGoodsList(direction) {
if (this.dataLoadState.pullDownRefresh || this.dataLoadState.reachBottom) return;
uni.showLoading({
title: '正在加载中...',
mask: true
})
this.dataLoadState.pullDownRefresh = direction === Enums.DATA_DIRECTION.UP;
this.dataLoadState.reachBottom = direction === Enums.DATA_DIRECTION.DOWN;
if (this.dataLoadState.reachBottom) {
if (Math.ceil(this.queryPage.total / this.queryPage.per_page) < this.queryPage.page) {
return setTimeout(() => {
uni.showToast({
title: '没有更多数据了！',
icon: 'none'
});
}, 500);
}
}
homeservice.newqueryList(this.queryPage).then(result => {
let newList = this.LoupanList.concat(result.data)
this.LoupanList = newList
// 分页对象处理
this.queryPage.total = result.total;
this.queryPage.per_page = result.per_page;
// 停止当前页面下拉刷新
if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
// 数据加载状态处理 false
this.dataLoadState.pullDownRefresh = false;
this.dataLoadState.reachBottom = false;
uni.hideLoading();
}).catch(err => {
// 停止当前页面下拉刷新
if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
// 数据加载状态处理 false
this.dataLoadState.pullDownRefresh = false;
this.dataLoadState.reachBottom = false;
uni.hideLoading();
});
},
//做滚动加载使用
loadMore() {
this.queryPage.page = this.queryPage.page + 1;
this.loadGoodsList(Enums.DATA_DIRECTION.DOWN);
},
//获取自定义产品信息
getCustomSizeInfo() {
var data = {
s: 'Product.getCustomize',
machine_id: this.queryPage.machine_id
};
homeservice.queryList(data).then(result => {
this.good_id = result.id
}).catch(err => {
});
},
},
onLoad(options) {
//获取屏幕宽高
this.sliderdefaultWith = uni.upx2px(280) + 22;
let that = this;
console.log(options)
wx.getSystemInfo({
success: function(res) {
let pixelRate = res.windowWidth / 750;
that.data.windowWidth = res.windowWidth // 屏幕宽度
that.data.windowHeight = res.windowHeight // 屏幕高度
let heiPixelRate = res.windowHeight / 1452;
that.heiPixelRate = heiPixelRate
that.data.pixelRate = pixelRate // 屏幕宽度比率
if (options) { // 判断是从设备进来
that.queryPage.machine_id = options.machine_id // 设备id
that.parameter.machine_id = options.machine_id // 设备id
//画布接口/查询布置画布列表
that.LoupanList = []
that.OldConvert_rate = 1
that.inputWidth = 200 //文本(毫米)
that.inputHeight = 450 //文本(毫米)
that.render_cove_width = that.inputWidth * that.convert_rate //最大宽度
that.render_cove_height = that.inputHeight * that.convert_rate //最大高度
that.pixel_Width = that.inputWidth * that
.OldConvert_rate //实际(像素)
that.pixel_Height = that.inputHeight * that
.OldConvert_rate //实际(像素)
if (that.pixel_Width > (that.data.windowWidth * 0.5)) {
that.pixel_scale = (that.data.windowWidth * 0.5) / that
.pixel_Width
} else {
if (that.pixel_Width < (that.data.windowWidth * 0.5) &&
that.pixel_Height < (that.data
.windowHeight * 0.5)) {
that.pixel_scale = 1
}
}
if (that.pixel_Height > (that.data.windowHeight * 0.5)) {
if ((that.data.windowHeight * 0.5) / that.pixel_Height <
1) {
that.pixel_scale = (that.data.windowHeight * 0.5) /
that.pixel_Height
}
} else {
if (that.pixel_Width < (that.data.windowWidth * 0.5) &&
that.pixel_Height < (that.data.windowHeight * that
.pixelScale)) {
that.pixel_scale = 1
}
}
let real_width = Number(that.inputWidth);
let real_height = Number(that.inputHeight);
if (real_width > real_height) {
that.filletScale = real_width / 100;
} else {
that.filletScale = real_height / 100;
}
that.$refs['NumSlider'].initFilletRadius(that.newDefalutFilletData, that.filletScale);
that.getCustomSizeInfo();
//console.log("machine_id="+that.parameter.machine_id)
// homeservice.WorksList({
// machine_id: that.parameter.machine_id,
// s: 'machine.detail'
// }).then(res => {
// that.OldConvert_rate = res.convert_rate
// //this.OldConvert_rate = 1
// that.render_cove_width = res.size.width * that.OldConvert_rate //最大宽度
// that.render_cove_height = res.size.height * that.OldConvert_rate //最大高度
// //获取通用商品详情
// homeservice.queryList({
// s: 'Product.getCommonGoods',
// machine_id: that.parameter.machine_id
// }).then(result => {
// that.good = result
// that.wValue = res.size.width * that
// .OldConvert_rate //固定宽高比率计算(像素)
// that.hValue = res.size.height * that
// .OldConvert_rate //固定宽高比率计算(像素)
// that.previewWidth = res.size.width * that
// .OldConvert_rate //基础(像素)
// that.previewHeight = res.size.height * that
// .OldConvert_rate //基础(像素)
// that.inputWidth = res.size.width //文本(毫米)
// that.inputHeight = res.size.height //文本(毫米)
// that.pixel_Width = res.size.width * that
// .OldConvert_rate //实际(像素)
// that.pixel_Height = res.size.height * that
// .OldConvert_rate //实际(像素)
// if (that.pixel_Width > (that.data.windowWidth * 0.5)) {
// that.pixel_scale = (that.data.windowWidth * 0.5) / that
// .pixel_Width
// } else {
// if (that.pixel_Width < (that.data.windowWidth * 0.5) &&
// that.pixel_Height < (that.data
// .windowHeight * 0.5)) {
// that.pixel_scale = 1
// }
// }
// if (that.pixel_Height > (that.data.windowHeight * 0.5)) {
// if ((that.data.windowHeight * 0.5) / that.pixel_Height <
// 1) {
// that.pixel_scale = (that.data.windowHeight * 0.5) /
// that.pixel_Height
// }
// } else {
// if (that.pixel_Width < (that.data.windowWidth * 0.5) &&
// that.pixel_Height < (that.data.windowHeight * that
// .pixelScale)) {
// that.pixel_scale = 1
// }
// }
// let real_width = Number(that.inputWidth);
// let real_height = Number(that.inputHeight);
// if (real_width > real_height) {
// that.filletScale = real_width / 100;
// } else {
// that.filletScale = real_height / 100;
// }
// that.$refs['NumSlider'].initFilletRadius(that.newDefalutFilletData, that.filletScale);
// uni.stopPullDownRefresh();
// }).catch(err => {
// uni.stopPullDownRefresh();
// uni.showToast({
// title: err.msg,
// icon: 'none'
// });
// });
// }).catch(err => {
// //console.log(err)
// });
}
}
});
},
created() {
//设备信息
let app = uni.getSystemInfoSync();
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.headheight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2;
},
onShow() {
}
}
</script>
<style lang="scss">
page {
background: #101014;
}
.equalRatioAxtive {
color: #E6B01A !important;
border-color: #E6B01A !important;
}
.directionAxtive {
border-color: #E6B01A !important;
}
.classificationLeft {
background: #E6B01A !important;
}
.classificationRight {
background: #E6B01A !important;
}
.previewAxtiveLeft {
background: #E6B01A;
box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
border-radius: 50upx 50upx 0px 50upx;
}
.previewAxtiveRight {
background: #E6B01A;
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: 20upx;
width: 100%;
.footer_but {
margin: auto;
color: #fff;
text-align: center;
line-height: 88upx;
width: 300upx;
height: 88upx;
background: linear-gradient(92deg, #E6B01A, #F29F3D);
box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
border-radius: 50upx;
}
}
}
</style>
service/UserService.js
......@@ -48,14 +48,6 @@ const service = {
service.setUserInfo(data);
service.cacheUserInfo(service.getUserInfo());
}}),
// queryUser: (id = null) => _query({api: _queryUser, params: id, callBack: (data = {}) => {
// service.setUserInfo(data);
// service.cacheUserInfo(service.getUserInfo());
// }}),
// refreshToken: (oldToken = null) => _query({api: _refreshToken, params: oldToken, callBack: (data = {}) => {
// service.setToken(service.getAppUser().tokenHead + data);
// service.cacheAppUser(service.getAppUser());
// }}),
}
export default service
......
service/homeservice.js
......@@ -27,13 +27,13 @@ const service = {
// Material.category 贴图分类
queryList: (user = {}) => _queryList({api: route, params: user, callBack: (data = {}) => {
}}),
// 作品 Works.list// 我的作品 Works.mylist// 作品详情 Works.detail 作品分类 Works.category
//作品 Works.list// 我的作品 Works.mylist// 作品详情 Works.detail 作品分类 Works.category
WorksList: (user = {}) => _queryList({api: route, params: user, callBack: (data = {}) => {
}}),
cheshi: (user = {}) => _queryList({api: route_timeout, params: user, callBack: (data = {}) => {
}}),
// 贴头 Material.list// 我的贴头 Material.mylist// 贴头详情 Material.detail 贴头分类 Material.category
// 更新状态 Material.updateStatus off:下架，on：上架， publish:发布，del：删除
//贴头 Material.list// 我的贴头 Material.mylist// 贴头详情 Material.detail 贴头分类 Material.category
//更新状态 Material.updateStatus off:下架，on：上架， publish:发布，del：删除
MaterialList: (user = {}) => _queryList({api: route, params: user, callBack: (data = {}) => {
}}),
newqueryList: (user = {}) => _queryList({api: newroute, params: user, callBack: (data = {}) => {
......@@ -44,7 +44,6 @@ export default service
/**
* url:/lite/index
*
* 获取附件店铺
* query：{s: 'Machine.shopList',longitude: ,latitude: ,distance:}
* 个人最新消费记录
......
util/Enums.js
......@@ -64,7 +64,7 @@ export default {
StringStyle,
DataType,
ContentType,
// 公共枚举值
//公共枚举值
TRUE: true,
FALSE: false,
STR_TRUE: '1',
......
util/Env.js
const accountInfo = wx.getAccountInfoSync();// 获取当前帐号信息
if(!accountInfo.miniProgram.envVersion){
console.error("获取运行环境失败!");
//console.error("获取运行环境失败!");
}
const baseApi = {
// 开发版
......@@ -13,7 +13,6 @@ const baseApi = {
release: "https://tprint.colorpark.cn",
};
const baseURL = baseApi[accountInfo.miniProgram.envVersion]
//console.log(accountInfo.miniProgram.envVersion)
//console.log(baseURL)
const Env = {
getDevBaseURL: () => baseURL,
......@@ -27,6 +26,5 @@ const Env = {
getappId: () => "wx55b5b6d95c648041",
//getenvVersion: () => "trial",
getenvVersion: () => "release",
}
export default Env
\ No newline at end of file
util/http.js
......@@ -3,9 +3,9 @@ import store from '../store'
const baseUrl = Env.getBaseURL();
const http = ({ url = '', param = {}, ...other } = {}) => {
// wx.showLoading({
//wx.showLoading({
// title: '啊嘞，色彩正在绘制'
// });
//});
let timeStart = Date.now();
return new Promise((resolve, reject) => {
wx.request({
......
util/request.js
......@@ -10,14 +10,13 @@ request.interceptors.request.use((config, promise) => {
//超时设置
if (config._timeout) config.timeout = 60000;
//从环境变量中取 BASE_UR
console.log(process)
if (process.env.NODE_ENV === 'development') config.baseURL = Env.getDevBaseURL()
else config.baseURL = Env.getBaseURL()
//JSON格式化，未指定时，默认true
config.parseJson = $n._isNotNull(config.parseJson) ? config.parseJson : true
// 如指定_token == true，则在headers中跟上相关token信息
//如指定_token == true，则在headers中跟上相关token信息
if (config._token) config.headers['token'] = store.getters.appUser.token;
console.warn('####### API Request: ', config)
//console.warn('####### API Request: ', config)
return config
})
......@@ -41,7 +40,7 @@ request.interceptors.response.use(
},
(error, promise) => {
let msg = $n._caseValue(error.code, 0, '网络连接异常', 1, '网络连接超时', 401, '请求服务未授权', error.msg)
console.error('####### API Response error: ', error)
//console.error('####### API Response error: ', error)
if (error.status == 401 ) {
uni.showModal({
title: '',
......@@ -56,12 +55,9 @@ request.interceptors.response.use(
title: '',
content: '服务器异常,状态=500' ,
showCancel: false,
})
} else return promise.reject(msg)
},
)
export default request
\ No newline at end of file
util/updata.js
......@@ -59,7 +59,7 @@ App({
updateManager.applyUpdate()
})
updateManager.onUpdateFailed(function () {
// 新的版本下载失败
//新的版本下载失败
wx.showModal({
title: '已经有新版本了哟~',
content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
......
util/wechat.js
......@@ -7,7 +7,6 @@ import Env from './Env'
const wechat = {
oauth2: ({appid, redirectUri, responseType = 'code', scope = 'snsapi_base', state = 'WECHAT'} = {}) => {
let oauth2URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + redirectUri + '&response_type=' + responseType + '&scope=' + scope + '&state=' + state + '#wechat_redirect'
//console.warn('### oauth2URL ###', oauth2URL)
window.location.href = oauth2URL
},
hashSHA1: (str) => {
......@@ -37,7 +36,7 @@ const wechat = {
//alert('wx.error: ' + JSON.stringify(res))
})
let configData = {
// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
//debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: jssdkUser.appid, // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr, // 必填，生成签名的随机串
......
util/wx-touch-event.js
......@@ -2,7 +2,6 @@
* Created by zhengqiguang on 2017/4/30.
*/
class WxTouchEvent {
constructor() {
this.preV = {x: null, y: null};
......@@ -83,14 +82,12 @@ class WxTouchEvent {
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = { x: otx - currentX, y: oty - currentY};
if (preV.x !== null) {
if (this.pinchStartLen > 0) {
evt.scale = getLen(v) / this.pinchStartLen;
evt.type = "pinch";
this.pinch.dispatch(evt);
}
evt.angle = getRotateAngle(v, preV);
evt.type = "rotate";
this.rotate.dispatch(evt);
......@@ -108,9 +105,7 @@ class WxTouchEvent {
}
this.pressMove.dispatch(evt);
}
this.touchMove.dispatch(evt);
this._cancelLongTap();
this.x2 = currentX;
this.y2 = currentY;
......@@ -149,14 +144,12 @@ class WxTouchEvent {
self.isDoubleTap = false;
}
}, 0)
if (!self.isDoubleTap) {
self.singleTapTimeout = setTimeout(function () {
self.singleTap.dispatch(evt);
}, 250);
}
}
this.preV.x = 0;
this.preV.y = 0;
this.scale = 1;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment