<template>
<view class="full-width full-height">
<!-- 礼花 -->
<firework ref="firework" v-if="isReady" style="position: fixed;z-index: 9999;"></firework>
<scroll-view scroll-y
style="height:100%;width: 100%; overflow: hidden; overflow-y: scroll; position: relative;">
<!-- <view :style="{transform: 'translateX(' + translateX + 'px)'}"
style="position: absolute;transition: all 1.5s; height:100%;width: 100%;">
<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
<image src="https://img.colorpark.cn/wechat/track/shejiqu_2.png" mode="widthFix" style="width: 100%;"></image>
</view>
<view style="position: absolute; top: 0; left: 100%; width: 100%; height: 100%;overflow: hidden;">
<image src="https://img.colorpark.cn/wechat/track/fukuanqu_2.png" mode="widthFix" style="width: 100%;"></image>
</view>
</view> -->
<!-- 3D动画 -->
<!-- @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd" -->
<!-- ,
transform: 'rotateX(-15deg) rotateY(' + coordinate.numberY +'deg)'} -->
<view class='crate-wrapper' v-if="good">
<view class="brush"
:style="{transform: 'translateX(' + activebrushX + 'px) scale(' + transformscale + ')'}">
<view class='crate' :class="{crateactive:crateactivestate}" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
transform: 'rotateX(-15deg) rotateY(' + coordinate.numberY +'deg)'}">
<!-- <view class='side top'>
<image src="../../static/img/c.png" mode=""
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
</view>
<view class='side bottom' :style="{'-webkit-transform': 'translateY(' + (data.editorHeight - 20) + 'px) rotateX(90deg)',
transform: 'translateY(' + (data.editorHeight - 20) + 'px) rotateX(90deg)'}">
<image src="../../static/img/c.png" mode=""
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
</view>
<view class='side left'>
<image src="../../static/img/b.png" mode=""
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
</view>
<view class='side right' :style="{'-webkit-transform': 'translateX(' + (data.editorWidth - 20) + 'px) rotateY(90deg)',
transform: 'translateX(' + (data.editorWidth - 20) + 'px) rotateY(90deg)'}">
<image src="../../static/img/b.png" mode=""
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
</view> -->
<view class='side front'>
<!-- 前 -->
<image :src="background_surface_image + '?x-oss-process=image/resize,lfit,w_1500'" mode=""
style="position: absolute; width: 100%; height: 98%; left: 0; top: 0;"></image>
<!-- <view style="position: absolute; width: 100%; height: 98%; left: 0; top: 0; background: #fff;"></view> -->
<image :src="( good.icon ? good.icon : good.image )" mode="aspectFit"
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
<image :src="good.goods.front_image_old " mode="aspectFit"
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
</view>
<!--<view class='side back'>
<image src="../../static/img/a.png" mode=""
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
</view>-->
</view>
<view style=" text-align: center;" :style="{opacity:titlestate ? 1:0}">
<view style="font-size: 35upx; font-weight: bold;">
<text style="color: #FFFFFF;">{{good.goods.alias_name || '**'}}</text>
</view>
<view style="margin-top: 8upx;">
<text style="color: #F56364;font-size: 42upx;">
{{currency}}<text style="font-size: 42upx;margin-left:6upx" v-if="good">{{add}}</text>
</text>
</view>
</view>
</view>
</view>
</scroll-view>
<view v-if=" support_oversea == 1"
style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
<view style="width: 100%; height: 100upx;
background: linear-gradient(-90deg, #178CE6, #984ACE); font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF; " @click="commitOrder()">
{{$i18n.messages[$i18n.locale]['支付领取']}}
</view>
<!-- <view v-if = "support_oversea == 1" style="width: 50%; height: 100upx;
background: #fff; font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: left; color: #333; " @click="commitOrderOnPay()">
Pay offline
</view> -->
</view>
<view v-if=" support_oversea != 1"
style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
<view v-if="support_paypal == 1"
style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
<view style="width: 50%; height: 100upx;
background: linear-gradient(-90deg, #178CE6, #984ACE); font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF; " @click="commitOrder()">
{{$i18n.messages[$i18n.locale]['支付领取']}}
</view>
<view style="width: 50%; height: 100upx;
background: #fff; font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: left; color: #8148BB; " @click="commitOrderOnPay()">
{{$i18n.messages[$i18n.locale]['线下支付']}}
</view>
</view>
<view v-if="support_paypal != 1"
style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
<view style="width: 100%; height: 100upx;
background: #fff; font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: left; color: #8148BB; " @click="commitOrderOnPay()">
{{$i18n.messages[$i18n.locale]['线下支付']}}
</view>
</view>
<!-- <view style="width: 50%; height: 100upx;
background: linear-gradient(-90deg, #178CE6, #984ACE); font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF; " @click="commitOrder()">
{{$i18n.messages[$i18n.locale]['支付领取']}}
</view> -->
<!-- <view v-if = "support_oversea == 1" style="width: 50%; height: 100upx;
background: #fff; font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: left; color: #333; " @click="commitOrderOnPay()">
Pay offline
</view> -->
</view>
<!-- <view v-if = "support_paypal == 0 || support_oversea == 0 " style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
<view v-if = "support_paypal == 1" style="width: 100%; height: 100upx;
background: linear-gradient(-90deg, #178CE6, #984ACE); font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF; " @click="commitOrder()">
{{$i18n.messages[$i18n.locale]['支付领取']}}
</view>
<view v-if = "support_oversea == 1" style="width: 100%; height: 100upx;
background: #fff; font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: left; color: #333; " @click="commitOrderOnPay()">
Pay offline
</view>
</view> -->
<!-- <view v-if = "support_paypal == 1 && support_oversea == 1" style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
<view v-if = "support_paypal == 1" style="width: 50%; height: 100upx;
background: linear-gradient(-90deg, #178CE6, #984ACE); font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF; " @click="commitOrder()">
{{$i18n.messages[$i18n.locale]['支付领取']}}
</view>
<view v-if = "support_oversea == 1" style="width: 50%; height: 100upx;
background: #fff; font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: left; color: #333; " @click="commitOrderOnPay()">
Pay offline
</view>
</view>
<view v-if = "support_paypal == 0 || support_oversea == 0 " style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
<view v-if = "support_paypal == 1" style="width: 100%; height: 100upx;
background: linear-gradient(-90deg, #178CE6, #984ACE); font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF; " @click="commitOrder()">
{{$i18n.messages[$i18n.locale]['支付领取']}}
</view>
<view v-if = "support_oversea == 1" style="width: 100%; height: 100upx;
background: #fff; font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: left; color: #333; " @click="commitOrderOnPay()">
Pay offline
</view>
</view> -->
</view>
</template>
<script>
import homeservice from '@/service/homeservice.js'
import uniPopup from '../index/common/uni-popup/uni-popup.vue'
import Enums from '@/util/Enums';
import md5 from 'js-md5';
import firework from '@/components/ay-firework/firework.vue'; //礼花
export default {
components: {
uniPopup,
firework
},
computed: {
//相加
add(arg1, arg2) {
if (this.good != null && this.coupon != null) {
if (this.coupon.discount_amount != undefined) {
return (Math.round(this.good.sales_price * 100) + Math.round(this.good.goods.sales_price * 100) -
Math.round(this.coupon.discount_amount * 100)) / 100;
} else {
return (Math.round(this.good.sales_price * 100) + Math.round(this.good.goods.sales_price * 100)) /
100;
}
} else {
return ''
}
},
//相乘
multiple(arg1, arg2) {
return (Math.round(arg1 * 100) * Math.round(arg2 * 100)) / 10000;
},
},
data() {
return {
coupon_flag_desc: null,
type: 'bottom',
tabletext: true, // true设备 false快递
good: null, //商品数据
equipmentlist: [], //设备列表数据
machine_id: null, //设备id
machine_item: null, //设备信息
goods_id: null, //商品id
works_id: null, //作品id
sizetext_id: null,
sizetext: null, //选中设备的尺码
give_sizetext: null, //选中配送的尺码
give_dict_id: null, //属性字典id
sizestock: null, //尺码库存
channel_no: null, //货道
dict_id: null, //属性字典id
coupon: null, //优惠劵
stock: null, //尺码
machine_pages: true, //设备进来的状态
myadress: {},
loading: false,
orderIdone: null, //订单号
orderIdtwo: null, //订单号
resultpayone: null,
resultpaytwo: null,
listtmplIds: [],
sn: null, //前端查询标志
activebrushX: -400, //动画进来出去
crateactivestate: false, //开始自转
titlestate: false,
isReady: false, //礼花
data: {
windowWidth: 0, // 屏幕宽度
windowHeight: 0, // 屏幕高度
pixelRate: 0, // 屏幕宽度比率
editorWidth: 0, // 设计宽度
editorHeight: 0, // 设计高度
render_cove_width: null,
render_cove_height: null,
render_left: null,
render_top: null,
},
teststate: false, //开启测试模式 false true
translateX: 0,
coordinate: {
startX: 0,
startY: 0,
touchMoveX: 0,
touchMoveY: 0,
numberY: 0,
state: false,
},
transformscale: 0.92, //整体缩小
key: null,
background_surface_image: null, //定制壳手机壳底色
url_pay: "", //支付地址
currency: "$", //符号
support_paypal: 0, // paypal 开关 0：不开启支付 1:支付
support_oversea: 0, //是否支持海外配送 0：不支持 1：支持
userAddressData: null, //地址信息
machineDetail: null, //设备详情
};
},
methods: {
//不需要开启支付
commitOrderOnPay() {
let goods_specs_name = "";
if (this.good != null && this.good.goods != null) {
goods_specs_name = this.good.goods.alias_name;
}
let data = {
s: 'Order.create',
type: this.key || 2, //1：配送版，2：单机版，3：自助版
machine_id: this.machine_id, //设备
goods_id: this.goods_id, //产品
works_id: this.works_id, //作品
channel_no: null, //货道
dict_id: null, //属性字典id
goods_size: null, //产品尺寸
works_num: null, //作品
shop_id: this.tabletext ? this.machine_item.shop_id : null, //商铺
sn: null, //前端查询标志
coupon_id: null, //优惠券id，支付多个id( 1-2-3)
user_address: this.userAddressData, //地址
surface_type: this.$base.surfaceData.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
surface_id: this.$base.surfaceData.surface_id, //材质对应的编号，没有的话就为0或者不传
surface_color_series_id: this.$base.surfaceData.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
surface_color_id: this.$base.surfaceData.surface_color_id, //选择的颜色编号，没有的话就不传或者为0
language: this._i18n.locale,
support_paypal: "0",
goods_specs: goods_specs_name,
terminal: 4,
}
if (this.coupon.ids != undefined && this.coupon != null) {
data.coupon_id = this.coupon.ids.join("-")
}
uni.showLoading({
title: this.$i18n.messages[this.$i18n.locale]['正在生成订单'],
mask: true
})
homeservice.WorksListPhone(data).then(result => {
uni.hideLoading();
uni.navigateTo({
url: '../mall/lineUp?machine_id=' + this.machine_id
})
}).catch(err => {
uni.hideLoading();
uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
});
},
//创建订单
self_help() {
let promoterId = "";
try { //数据缓存 同步 一定要用try catch 包裹
promoterId = uni.getStorageSync('promoter_id');
} catch (e) {
//TODO handle the exception
};
let goods_specs_name = "";
if (this.good != null && this.good.goods != null) {
goods_specs_name = this.good.goods.alias_name;
}
let data = {
s: 'Order.create',
type: this.key || 2, //1：配送版，2：单机版，3：自助版
machine_id: this.machine_id, //设备
goods_id: this.goods_id, //产品
works_id: this.works_id, //作品
channel_no: null, //货道
dict_id: null, //属性字典id
goods_size: null, //产品尺寸
works_num: null, //作品
shop_id: this.tabletext ? this.machine_item.shop_id : null, //商铺
sn: null, //前端查询标志
coupon_id: null, //优惠券id，支付多个id( 1-2-3)
user_address: this.userAddressData, //地址
//user_address: null,
surface_type: this.$base.surfaceData.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
surface_id: this.$base.surfaceData.surface_id, //材质对应的编号，没有的话就为0或者不传
surface_color_series_id: this.$base.surfaceData.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
surface_color_id: this.$base.surfaceData.surface_color_id, //选择的颜色编号，没有的话就不传或者为0
language: this._i18n.locale,
support_paypal: "1",
promoter_id: promoterId,
goods_specs: goods_specs_name,
terminal: 4,
}
if (this.coupon.ids != undefined && this.coupon != null) {
data.coupon_id = this.coupon.ids.join("-")
}
uni.showLoading({
title: this.$i18n.messages[this.$i18n.locale]['正在生成订单'],
mask: true
})
homeservice.WorksListPhone(data).then(result => {
let url_pay = result.link
window.location.href = url_pay
uni.hideLoading();
}).catch(err => {
uni.hideLoading();
uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
});
},
//提交订单
commitOrder() {
this.self_help()
},
//获取库存与优惠券信息
getMachineStock() {
homeservice.queryListPhone({
s: 'Machine.getMachineStock',
machine_id: this.machine_id,
// key: this.tabletext ? 3 : 1
key: this.key
}).then(result => {
this.coupon = result.coupon
this.stock = result.stock
// 读出锁库存储存信息
this.sizetext_id = this.$base.lockInventory.id
this.sizetext = this.$base.lockInventory.goods_size
this.sizestock = this.$base.lockInventory.stock
this.channel_no = this.$base.lockInventory.channel_no
this.dict_id = this.$base.lockInventory.dict_id
}).catch(err => {
//uni.showToast({title: err.msg,icon: 'none'});
});
},
//设备进来的
machine_pageslist(e) {
this.machine_pages = false
this.machine_item = this.machineDetail
this.key = this.machine_item.category.key
if (this.machine_item.currency) {
this.currency = this.machine_item.currency;
}
this.getMachineStock();
// homeservice.WorksListPhone({
// s: 'machine.newDetail',
// machine_id: this.machine_id,
// }).then(res => {
// this.machine_item = res
// this.key = this.machine_item.category.key
// // this.machine_item.category.forEach(item => {
// // if (item.id == this.machine_item.machine_category_id) {
// // this.machine_item.machine_category_text = item.title
// // this.key = item.key
// // }
// // })
// if (res.currency) {
// this.currency = res.currency;
// }
// this.getMachineStock()
// }).catch(err => {
// //uni.showToast({title: err.msg,icon: 'none'})
// });
},
Worksdetail() { //获取作品详情
homeservice.WorksListPhone({
s: 'Works.detail',
id: this.works_id,
surface_type: this.$base.surfaceData.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
surface_id: this.$base.surfaceData.surface_id, //材质对应的编号，没有的话就为0或者不传
}).then(result => {
this.good = result
this.data.editorWidth = result.goods.design_width * this.data.pixelRate // 设计宽度
this.data.editorHeight = result.goods.design_height * this.data.pixelRate // 设计高度
this.data.render_cove_width = result.goods.render_cove_width * (result.goods.design_width /
result.goods.render_width) * this.data.pixelRate + 30 // 设计高度
this.data.render_cove_height = result.goods.render_cove_height * (result.goods.design_height /
result.goods.render_height) * this.data.pixelRate + 30 // 设计高度
this.data.render_left = result.goods.render_left * (result.goods.design_width / result.goods
.render_width) * this.data.pixelRate // 设计高度
this.data.render_top = result.goods.render_top * (result.goods.design_height / result.goods
.render_height) * this.data.pixelRate // 设计高度
this.data.activebrushX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this.data
.editorWidth)
this.data.printingStartX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this.data
.editorWidth)
this.activebrushX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this.data
.editorWidth)
this.$base.mobilePhoneCaseSize = this.data
this.translateX = -this.data.windowWidth
this.activebrushX = 0
this.isReady = true;
this.crateactivestate = false
this.titlestate = true
this.coordinate.state = true
uni.stopPullDownRefresh();
}).catch(err => {
//uni.showToast({ title: err.msg || err.data, icon: 'none' });
});
},
},
//下拉加载
onPullDownRefresh() {},
//上拉加载
onReachBottom() {},
onLoad(options) {
var that = this;
//获取屏幕宽高
wx.getSystemInfo({
success: function(res) {
let pixelRate = res.windowWidth / 750;
that.data.windowWidth = res.windowWidth // 屏幕宽度
that.data.windowHeight = res.windowHeight // 屏幕高度
that.data.pixelRate = pixelRate // 屏幕宽度比率
}
})
uni.setNavigationBarTitle({
title: that.$i18n.messages[that.$i18n.locale]['付款区']
})
if (options.goods_id != 'null') {
this.goods_id = options.goods_id
homeservice.queryListPhone({
s: 'Product.detail',
id: this.goods_id
}).then(result => {
this.background_surface_image = result.surface_pic
}).catch(err => {
//uni.showToast({title: err.msg,icon: 'none'});
});
}
if (options.machine_id != 'null') { //设备进来的
this.machine_id = options.machine_id
}
if (options.goodid != 'null') {
this.works_id = options.goodid
this.Worksdetail() // 获取作品
}
if (options.support_paypal != 'null') {
this.support_paypal = options.support_paypal
}
if (options.support_oversea != 'null') {
this.support_oversea = options.support_oversea
}
if (options.userAddressData && options.userAddressData != 'null') {
this.userAddressData = JSON.parse(options.userAddressData)
this.userAddressData.address = this.userAddressData.detail
//address=(null)
}
if (options.machineDetail && options.machineDetail != 'null') {
this.machineDetail = JSON.parse(options.machineDetail);
this.machine_pageslist() // 默认有设备进来的
//console.log(this.machineDetail);
}
},
onShow() {},
onUnload() {}
};
</script>
<style lang="scss">
page {
background: #131319 !important;
}
//3D动画
.crate-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
// margin-top: 10upx;
// background-color: #232323;
}
.crate {
// width: 200px;
// height: 370px;
position: relative;
// -webkit-transform: rotateX(180deg);
// transform: rotateX(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.crateactive {
-webkit-animation: crate-spin 10s linear 1;
/* linear 动画从头到尾的速度是相同的。 */
animation: crate-spin 10s linear 1;
/* infinite 规定动画应该无限次播放。 */
}
.brush {
transition: all 1.5s;
transform: translateX(-400px);
}
.crate .side {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/* background-color: #d07f2c; */
/* outline: 1px solid #a66523; */
}
/* 上 */
.crate .side.top {
width: 100%;
height: 40px;
-webkit-transform: translateY(calc(-40px/2)) rotateX(90deg);
transform: translateY(calc(-40px/2)) rotateX(90deg);
}
/* 下 */
.crate .side.bottom {
width: 100%;
height: 40px;
// -webkit-transform: translateY(calc(720px/2)) rotateX(90deg);
// transform: translateY(calc(720px/2)) rotateX(90deg);
}
// 左
.crate .side.left {
width: 40px;
height: 100%;
-webkit-transform: translateX(calc(-40px/2)) rotateY(-90deg);
transform: translateX(calc(-40px/2)) rotateY(-90deg);
}
// 右
.crate .side.right {
width: 40px;
height: 100%;
// -webkit-transform: translateX(calc(100%/2)) rotateY(90deg);
// transform: translateX(calc(100%/2)) rotateY(90deg);
}
/* 前 */
.crate .side.front {
-webkit-transform: translateZ(calc(30px/2));
transform: translateZ(calc(30px/2));
}
/* 后 */
.crate .side.back {
-webkit-transform: translateZ(calc(-40px/2)) rotateY(180deg);
transform: translateZ(calc(-40px/2)) rotateY(180deg);
}
// @-webkit-keyframes crate-spin {
// from {
// -webkit-transform: rotateX(-15deg) rotateY(0deg);
// transform: rotateX(-15deg) rotateY(0deg);
// }
// to {
// -webkit-transform: rotateX(-15deg) rotateY(-360deg);
// transform: rotateX(-15deg) rotateY(-360deg);
// }
// }
@keyframes crate-spin {
from {
-webkit-transform: rotateX(-15deg) rotateY(0deg);
transform: rotateX(-15deg) rotateY(0deg);
}
to {
-webkit-transform: rotateX(-15deg) rotateY(-360deg);
transform: rotateX(-15deg) rotateY(-360deg);
}
}
</style>