From 61d8252632a4ef2c3f2618094ff9195bbd6baf97 Mon Sep 17 00:00:00 2001 From: BigBoss <2280520255@qq.com> Date: Sun, 7 Jun 2020 22:52:19 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E8=AE=A2=E5=8D=95=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomSheet/BottomSheet.vue | 3 +- src/components/uni-swipe-action-item/bindingx.js | 245 ++++++ src/components/uni-swipe-action-item/index.wxs | 204 +++++ src/components/uni-swipe-action-item/mpalipay.js | 160 ++++ src/components/uni-swipe-action-item/mpother.js | 158 ++++ src/components/uni-swipe-action-item/mpwxs.js | 97 ++ .../uni-swipe-action-item.vue | 270 ++++++ .../uni-swipe-action/uni-swipe-action.vue | 58 ++ src/components/uni-transition/uni-transition.vue | 2 +- src/pages.json | 6 +- src/pages/cart/cart.vue | 976 +++++++++++---------- src/pages/confirmOrder/confirmOrder.vue | 123 ++- src/store/modules/cart.js | 14 +- 13 files changed, 1799 insertions(+), 517 deletions(-) create mode 100644 src/components/uni-swipe-action-item/bindingx.js create mode 100644 src/components/uni-swipe-action-item/index.wxs create mode 100644 src/components/uni-swipe-action-item/mpalipay.js create mode 100644 src/components/uni-swipe-action-item/mpother.js create mode 100644 src/components/uni-swipe-action-item/mpwxs.js create mode 100644 src/components/uni-swipe-action-item/uni-swipe-action-item.vue create mode 100644 src/components/uni-swipe-action/uni-swipe-action.vue diff --git a/src/components/BottomSheet/BottomSheet.vue b/src/components/BottomSheet/BottomSheet.vue index 4476370..eedbcd8 100644 --- a/src/components/BottomSheet/BottomSheet.vue +++ b/src/components/BottomSheet/BottomSheet.vue @@ -814,9 +814,10 @@ import store from '@/store' mp_id: this.mp_id, attrList: this.attrList, }) + this.$store.state.cart.buyItem = this.skuItem // 跳转到确认订单页面 uni.navigateTo({ - url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`, + url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}&isCart=false`, }) } }, diff --git a/src/components/uni-swipe-action-item/bindingx.js b/src/components/uni-swipe-action-item/bindingx.js new file mode 100644 index 0000000..59c592e --- /dev/null +++ b/src/components/uni-swipe-action-item/bindingx.js @@ -0,0 +1,245 @@ +const BindingX = uni.requireNativePlugin('bindingx'); +const dom = uni.requireNativePlugin('dom'); +const animation = uni.requireNativePlugin('animation'); + +export default { + data() { + return { + right: 0, + button: [], + preventGesture: false + } + }, + + watch: { + show(newVal) { + if (!this.position || JSON.stringify(this.position) === '{}') return; + if (this.autoClose) return + if (this.isInAnimation) return + if (newVal) { + this.open() + } else { + this.close() + } + }, + }, + created() { + if (this.swipeaction.children !== undefined) { + this.swipeaction.children.push(this) + } + }, + mounted() { + this.boxSelector = this.getEl(this.$refs['selector-box-hock']); + this.selector = this.getEl(this.$refs['selector-content-hock']); + this.buttonSelector = this.getEl(this.$refs['selector-button-hock']); + this.position = {} + this.x = 0 + setTimeout(() => { + this.getSelectorQuery() + }, 200) + }, + beforeDestroy() { + if (this.timing) { + BindingX.unbind({ + token: this.timing.token, + eventType: 'timing' + }) + } + if (this.eventpan) { + BindingX.unbind({ + token: this.eventpan.token, + eventType: 'pan' + }) + } + this.swipeaction.children.forEach((item, index) => { + if (item === this) { + this.swipeaction.children.splice(index, 1) + } + }) + }, + methods: { + onClick(index, item) { + this.$emit('click', { + content: item, + index + }) + }, + touchstart(e) { + if (this.isInAnimation) return + if (this.stop) return + this.stop = true + if (this.autoClose) { + this.swipeaction.closeOther(this) + } + let endWidth = this.right + let boxStep = `(x+${this.x})` + let pageX = `${boxStep}> ${-endWidth} && ${boxStep} < 0?${boxStep}:(x+${this.x} < 0? ${-endWidth}:0)` + + let props = [{ + element: this.selector, + property: 'transform.translateX', + expression: pageX + }] + + let left = 0 + for (let i = 0; i < this.options.length; i++) { + let buttonSelectors = this.getEl(this.$refs['button-hock'][i]); + if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return + let moveMix = endWidth - left + left += this.button[i].width + let step = `(${this.x}+x)/${endWidth}` + let moveX = `(${step}) * ${moveMix}` + let pageButtonX = `${moveX}&& (x+${this.x} > ${-endWidth})?${moveX}:${-moveMix}` + props.push({ + element: buttonSelectors, + property: 'transform.translateX', + expression: pageButtonX + }) + } + + this.eventpan = this._bind(this.boxSelector, props, 'pan', (e) => { + if (e.state === 'end') { + this.x = e.deltaX + this.x; + if (this.x < -endWidth) { + this.x = -endWidth + } + if (this.x > 0) { + this.x = 0 + } + this.stop = false + this.bindTiming(); + } + }) + }, + touchend(e) { + this.$nextTick(() => { + if (this.isopen && !this.isDrag && !this.isInAnimation) { + this.close() + } + }) + }, + bindTiming() { + if (this.isopen) { + this.move(this.x, -this.right) + } else { + this.move(this.x, -40) + } + }, + move(left, value) { + if (left >= value) { + this.close() + } else { + this.open() + } + }, + /** + * 开启swipe + */ + open() { + this.animation(true) + }, + /** + * 关闭swipe + */ + close() { + this.animation(false) + }, + /** + * 开启关闭动画 + * @param {Object} type + */ + animation(type) { + this.isDrag = true + let endWidth = this.right + let time = 200 + this.isInAnimation = true; + + let exit = `t>${time}`; + let translate_x_expression = `easeOutExpo(t,${this.x},${type?(-endWidth-this.x):(-this.x)},${time})` + let props = [{ + element: this.selector, + property: 'transform.translateX', + expression: translate_x_expression + }] + + let left = 0 + for (let i = 0; i < this.options.length; i++) { + let buttonSelectors = this.getEl(this.$refs['button-hock'][i]); + if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return + let moveMix = endWidth - left + left += this.button[i].width + let step = `${this.x}/${endWidth}` + let moveX = `(${step}) * ${moveMix}` + let pageButtonX = `easeOutExpo(t,${moveX},${type ? -moveMix + '-' + moveX: 0 + '-' + moveX},${time})` + props.push({ + element: buttonSelectors, + property: 'transform.translateX', + expression: pageButtonX + }) + } + + this.timing = BindingX.bind({ + eventType: 'timing', + exitExpression: exit, + props: props + }, (e) => { + if (e.state === 'end' || e.state === 'exit') { + this.x = type ? -endWidth : 0 + this.isInAnimation = false; + + this.isopen = this.isopen || false + if (this.isopen !== type) { + this.$emit('change', type) + } + this.isopen = type + this.isDrag = false + } + }); + }, + /** + * 绑定 BindingX + * @param {Object} anchor + * @param {Object} props + * @param {Object} fn + */ + _bind(anchor, props, eventType, fn) { + return BindingX.bind({ + anchor, + eventType, + props + }, (e) => { + typeof(fn) === 'function' && fn(e) + }); + }, + /** + * 获取ref + * @param {Object} el + */ + getEl(el) { + return el.ref + }, + /** + * 获取节点信息 + */ + getSelectorQuery() { + dom.getComponentRect(this.$refs['selector-content-hock'], (data) => { + if (this.position.content) return + this.position.content = data.size + }) + for (let i = 0; i < this.options.length; i++) { + dom.getComponentRect(this.$refs['button-hock'][i], (data) => { + if (!this.button) { + this.button = [] + } + if (this.options.length === this.button.length) return + this.button.push(data.size) + this.right += data.size.width + if (this.autoClose) return + if (this.show) { + this.open() + } + }) + } + } + } +} diff --git a/src/components/uni-swipe-action-item/index.wxs b/src/components/uni-swipe-action-item/index.wxs new file mode 100644 index 0000000..79c6f9e --- /dev/null +++ b/src/components/uni-swipe-action-item/index.wxs @@ -0,0 +1,204 @@ +/** + * 监听页面内值的变化,主要用于动态开关swipe-action + * @param {Object} newValue + * @param {Object} oldValue + * @param {Object} ownerInstance + * @param {Object} instance + */ +function sizeReady(newValue, oldValue, ownerInstance, instance) { + var state = instance.getState() + state.position = JSON.parse(newValue) + if (!state.position || state.position.length === 0) return + var show = state.position[0].show + state.left = state.left || state.position[0].left; + // 通过用户变量,开启或关闭 + if (show) { + openState(true, instance, ownerInstance) + } else { + openState(false, instance, ownerInstance) + } +} + +/** + * 开始触摸操作 + * @param {Object} e + * @param {Object} ins + */ +function touchstart(e, ins) { + var instance = e.instance; + var state = instance.getState(); + var pageX = e.touches[0].pageX; + // 开始触摸时移除动画类 + instance.removeClass('ani'); + var owner = ins.selectAllComponents('.button-hock') + for (var i = 0; i < owner.length; i++) { + owner[i].removeClass('ani'); + } + // state.position = JSON.parse(instance.getDataset().position); + state.left = state.left || state.position[0].left; + // 获取最终按钮组的宽度 + state.width = pageX - state.left; + ins.callMethod('closeSwipe') +} + +/** + * 开始滑动操作 + * @param {Object} e + * @param {Object} ownerInstance + */ +function touchmove(e, ownerInstance) { + var instance = e.instance; + var disabled = instance.getDataset().disabled + var state = instance.getState() + // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复 + disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false; + + if (disabled) return + var pageX = e.touches[0].pageX; + move(pageX - state.width, instance, ownerInstance) +} + +/** + * 结束触摸操作 + * @param {Object} e + * @param {Object} ownerInstance + */ +function touchend(e, ownerInstance) { + var instance = e.instance; + var disabled = instance.getDataset().disabled + var state = instance.getState() + + // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复 + disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false; + + if (disabled) return + // 滑动过程中触摸结束,通过阙值判断是开启还是关闭 + // fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13 + moveDirection(state.left, -40, instance, ownerInstance) +} + +/** + * 设置移动距离 + * @param {Object} value + * @param {Object} instance + * @param {Object} ownerInstance + */ +function move(value, instance, ownerInstance) { + var state = instance.getState() + // 获取可滑动范围 + var x = Math.max(-state.position[1].width, Math.min((value), 0)); + state.left = x; + instance.setStyle({ + transform: 'translateX(' + x + 'px)', + '-webkit-transform': 'translateX(' + x + 'px)' + }) + // 折叠按钮动画 + buttonFold(x, instance, ownerInstance) +} + +/** + * 移动方向判断 + * @param {Object} left + * @param {Object} value + * @param {Object} ownerInstance + * @param {Object} ins + */ +function moveDirection(left, value, ins, ownerInstance) { + var state = ins.getState() + var position = state.position + var isopen = state.isopen + if (!position[1].width) { + openState(false, ins, ownerInstance) + return + } + // 如果已经是打开状态,进行判断是否关闭,还是保留打开状态 + if (isopen) { + if (-left <= position[1].width) { + openState(false, ins, ownerInstance) + } else { + openState(true, ins, ownerInstance) + } + return + } + // 如果是关闭状态,进行判断是否打开,还是保留关闭状态 + if (left <= value) { + openState(true, ins, ownerInstance) + } else { + openState(false, ins, ownerInstance) + } +} + +/** + * 设置按钮移动距离 + * @param {Object} value + * @param {Object} instance + * @param {Object} ownerInstance + */ +function buttonFold(value, instance, ownerInstance) { + var ins = ownerInstance.selectAllComponents('.button-hock'); + var state = instance.getState(); + var position = state.position; + var arr = []; + var w = 0; + for (var i = 0; i < ins.length; i++) { + if (!ins[i].getDataset().button) return + var btnData = JSON.parse(ins[i].getDataset().button) + + // fix by mehaotian TODO 在 app-vue 中,字符串转对象,需要转两次,这里先这么兼容 + if (typeof(btnData) === 'string') { + btnData = JSON.parse(btnData) + } + + var button = btnData[i] && btnData[i].width || 0 + w += button + arr.push(-w) + // 动态计算按钮组每个按钮的折叠动画移动距离 + var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width) + if (i != 0) { + ins[i].setStyle({ + transform: 'translateX(' + distance + 'px)', + }) + } + } +} + +/** + * 开启状态 + * @param {Boolean} type + * @param {Object} ins + * @param {Object} ownerInstance + */ +function openState(type, ins, ownerInstance) { + var state = ins.getState() + var position = state.position + if (state.isopen === undefined) { + state.isopen = false + } + // 只有状态有改变才会通知页面改变状态 + if (state.isopen !== type) { + // 通知页面,已经打开 + ownerInstance.callMethod('change', { + open: type + }) + } + // 设置打开和移动状态 + state.isopen = type + + + // 添加动画类 + ins.addClass('ani'); + var owner = ownerInstance.selectAllComponents('.button-hock') + for (var i = 0; i < owner.length; i++) { + owner[i].addClass('ani'); + } + // 设置最终移动位置 + move(type ? -position[1].width : 0, ins, ownerInstance) + +} + +module.exports = { + sizeReady: sizeReady, + touchstart: touchstart, + touchmove: touchmove, + touchend: touchend +} diff --git a/src/components/uni-swipe-action-item/mpalipay.js b/src/components/uni-swipe-action-item/mpalipay.js new file mode 100644 index 0000000..8537b24 --- /dev/null +++ b/src/components/uni-swipe-action-item/mpalipay.js @@ -0,0 +1,160 @@ +export default { + data() { + return { + isshow: false, + viewWidth: 0, + buttonWidth: 0, + disabledView: false, + x: 0, + transition: false + } + }, + watch: { + show(newVal) { + if (this.autoClose) return + if (newVal) { + this.open() + } else { + this.close() + } + }, + }, + created() { + if (this.swipeaction.children !== undefined) { + this.swipeaction.children.push(this) + } + }, + beforeDestroy() { + this.swipeaction.children.forEach((item, index) => { + if (item === this) { + this.swipeaction.children.splice(index, 1) + } + }) + }, + mounted() { + this.isopen = false + this.transition = true + setTimeout(() => { + this.getQuerySelect() + }, 50) + + }, + methods: { + onClick(index, item) { + this.$emit('click', { + content: item, + index + }) + }, + touchstart(e) { + let { + pageX, + pageY + } = e.changedTouches[0] + this.transition = false + this.startX = pageX + if (this.autoClose) { + this.swipeaction.closeOther(this) + } + }, + touchmove(e) { + let { + pageX, + } = e.changedTouches[0] + this.slide = this.getSlide(pageX) + if (this.slide === 0) { + this.disabledView = false + } + + }, + touchend(e) { + this.stop = false + this.transition = true + if (this.isopen) { + if (this.moveX === -this.buttonWidth) { + this.close() + return + } + this.move() + } else { + if (this.moveX === 0) { + this.close() + return + } + this.move() + } + }, + open() { + this.x = this.moveX + this.$nextTick(() => { + this.x = -this.buttonWidth + this.moveX = this.x + + if(!this.isopen){ + this.isopen = true + this.$emit('change', true) + } + }) + }, + close() { + this.x = this.moveX + this.$nextTick(() => { + this.x = 0 + this.moveX = this.x + if(this.isopen){ + this.isopen = false + this.$emit('change', false) + } + }) + }, + move() { + if (this.slide === 0) { + this.open() + } else { + this.close() + } + }, + onChange(e) { + let x = e.detail.x + this.moveX = x + if (x >= this.buttonWidth) { + this.disabledView = true + this.$nextTick(() => { + this.x = this.buttonWidth + }) + } + }, + getSlide(x) { + if (x >= this.startX) { + this.startX = x + return 1 + } else { + this.startX = x + return 0 + } + + }, + getQuerySelect() { + const query = uni.createSelectorQuery().in(this); + query.selectAll('.viewWidth-hook').boundingClientRect(data => { + + this.viewWidth = data[0].width + this.buttonWidth = data[1].width + this.transition = false + this.$nextTick(() => { + this.transition = true + }) + + if (!this.buttonWidth) { + this.disabledView = true + } + + if (this.autoClose) return + if (this.show) { + this.open() + } + }).exec(); + + } + } +} diff --git a/src/components/uni-swipe-action-item/mpother.js b/src/components/uni-swipe-action-item/mpother.js new file mode 100644 index 0000000..ae97ba6 --- /dev/null +++ b/src/components/uni-swipe-action-item/mpother.js @@ -0,0 +1,158 @@ +// #ifdef APP-NVUE +const dom = weex.requireModule('dom'); +// #endif +export default { + data() { + return { + uniShow: false, + left: 0 + } + }, + computed: { + moveLeft() { + return `translateX(${this.left}px)` + } + }, + watch: { + show(newVal) { + if (!this.position || JSON.stringify(this.position) === '{}') return; + if (this.autoClose) return + if (newVal) { + this.$emit('change', true) + this.open() + } else { + this.$emit('change', false) + this.close() + } + } + }, + mounted() { + this.position = {} + if (this.swipeaction.children !== undefined) { + this.swipeaction.children.push(this) + } + setTimeout(() => { + this.getSelectorQuery() + }, 100) + }, + beforeDestoy() { + this.swipeaction.children.forEach((item, index) => { + if (item === this) { + this.swipeaction.children.splice(index, 1) + } + }) + }, + methods: { + onClick(index, item) { + this.$emit('click', { + content: item, + index + }) + this.close() + }, + touchstart(e) { + const { + pageX + } = e.touches[0] + if (this.disabled) return + const left = this.position.content.left + if (this.autoClose) { + this.swipeaction.closeOther(this) + } + this.width = pageX - left + if (this.isopen) return + if (this.uniShow) { + this.uniShow = false + this.isopen = true + this.openleft = this.left + this.position.button.width + } + }, + touchmove(e, index) { + if (this.disabled) return + const { + pageX + } = e.touches[0] + this.setPosition(pageX) + }, + touchend() { + if (this.disabled) return + if (this.isopen) { + this.move(this.openleft, 0) + return + } + this.move(this.left, -40) + }, + setPosition(x, y) { + if (!this.position.button.width) { + return + } + // this.left = x - this.width + this.setValue(x - this.width) + }, + setValue(value) { + // 设置最大最小值 + this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0)) + this.position.content.left = this.left + if (this.isopen) { + this.openleft = this.left + this.position.button.width + } + }, + move(left, value) { + if (left >= value) { + this.$emit('change', false) + this.close() + } else { + this.$emit('change', true) + this.open() + } + }, + open() { + this.uniShow = true + this.left = -this.position.button.width + this.setValue(-this.position.button.width) + }, + close() { + this.uniShow = true + this.setValue(0) + setTimeout(() => { + this.uniShow = false + this.isopen = false + }, 300) + }, + getSelectorQuery() { + // #ifndef APP-NVUE + const views = uni.createSelectorQuery() + .in(this) + views + .selectAll('.selector-query-hock') + .boundingClientRect(data => { + this.position.content = data[1] + this.position.button = data[0] + if (this.autoClose) return + if (this.show) { + this.open() + } else { + this.close() + } + }) + .exec() + // #endif + // #ifdef APP-NVUE + dom.getComponentRect(this.$refs['selector-content-hock'], (data) => { + if (this.position.content) return + this.position.content = data.size + }) + dom.getComponentRect(this.$refs['selector-button-hock'], (data) => { + if (this.position.button) return + this.position.button = data.size + if (this.autoClose) return + if (this.show) { + this.open() + } else { + this.close() + } + }) + // #endif + } + } +} diff --git a/src/components/uni-swipe-action-item/mpwxs.js b/src/components/uni-swipe-action-item/mpwxs.js new file mode 100644 index 0000000..3073ff8 --- /dev/null +++ b/src/components/uni-swipe-action-item/mpwxs.js @@ -0,0 +1,97 @@ +export default { + data() { + return { + position: [], + button: [] + } + }, + computed: { + pos() { + return JSON.stringify(this.position) + }, + btn() { + return JSON.stringify(this.button) + } + }, + watch: { + show(newVal) { + if (this.autoClose) return + let valueObj = this.position[0] + if (!valueObj) { + this.init() + return + } + valueObj.show = newVal + this.$set(this.position, 0, valueObj) + } + }, + created() { + if (this.swipeaction.children !== undefined) { + this.swipeaction.children.push(this) + } + }, + mounted() { + this.init() + + }, + beforeDestroy() { + this.swipeaction.children.forEach((item, index) => { + if (item === this) { + this.swipeaction.children.splice(index, 1) + } + }) + }, + methods: { + init() { + + setTimeout(() => { + this.getSize() + this.getButtonSize() + }, 50) + }, + closeSwipe(e) { + if (!this.autoClose) return + this.swipeaction.closeOther(this) + }, + + change(e) { + this.$emit('change', e.open) + let valueObj = this.position[0] + if (valueObj.show !== e.open) { + valueObj.show = e.open + this.$set(this.position, 0, valueObj) + } + }, + onClick(index, item) { + this.$emit('click', { + content: item, + index + }) + }, + appTouchStart(){}, + appTouchEnd(){}, + getSize() { + const views = uni.createSelectorQuery().in(this) + views + .selectAll('.selector-query-hock') + .boundingClientRect(data => { + if (this.autoClose) { + data[0].show = false + } else { + data[0].show = this.show + } + this.position = data + }) + .exec() + }, + getButtonSize() { + const views = uni.createSelectorQuery().in(this) + views + .selectAll('.button-hock') + .boundingClientRect(data => { + this.button = data + }) + .exec() + } + } +} diff --git a/src/components/uni-swipe-action-item/uni-swipe-action-item.vue b/src/components/uni-swipe-action-item/uni-swipe-action-item.vue new file mode 100644 index 0000000..9a0f8f2 --- /dev/null +++ b/src/components/uni-swipe-action-item/uni-swipe-action-item.vue @@ -0,0 +1,270 @@ + + + + diff --git a/src/components/uni-swipe-action/uni-swipe-action.vue b/src/components/uni-swipe-action/uni-swipe-action.vue new file mode 100644 index 0000000..9ad5c5e --- /dev/null +++ b/src/components/uni-swipe-action/uni-swipe-action.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/src/components/uni-transition/uni-transition.vue b/src/components/uni-transition/uni-transition.vue index a0e0781..918f5f2 100644 --- a/src/components/uni-transition/uni-transition.vue +++ b/src/components/uni-transition/uni-transition.vue @@ -10,7 +10,7 @@ const animation = uni.requireNativePlugin('animation'); // #endif /** - * Transition 过渡动画 + * Transition 过渡动画 * @description 简单过渡动画组件 * @tutorial https://ext.dcloud.net.cn/plugin?id=985 * @property {Boolean} show = [false|true] 控制组件显示或隐藏 diff --git a/src/pages.json b/src/pages.json index b786336..bec7b9d 100644 --- a/src/pages.json +++ b/src/pages.json @@ -57,7 +57,11 @@ { "path": "pages/cart/cart", "style": { - "navigationBarTitleText": "购物车" + "navigationBarTitleText": "购物车", + // "disableScroll":true, + "app-plus":{ + "bounce":"none" + } } }, { diff --git a/src/pages/cart/cart.vue b/src/pages/cart/cart.vue index 4d82a33..ade9870 100644 --- a/src/pages/cart/cart.vue +++ b/src/pages/cart/cart.vue @@ -1,153 +1,156 @@ - - - - - + this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked) + uni.navigateTo({ + url:`../confirmOrder/confirmOrder?isCart=true`, + }) + }, + counter(index, isadd, item) { + // console.log('item=====>', item) + // console.log('num=====>', item.num) + const nums = parseInt(item.num) + if (isadd) { + if (nums >= this.maxCount) { + this.addDisabled = true + } else { + this.addDisabled = true + store.dispatch('cart/modiCart', { + uid: this.$store.state.user.userInfo.uid, + openid: this.$store.state.user.userInfo.openid, + mp_id: item.mp_id, + sk_id: item.sk_id, + price: item.nowPrice, + pid: item.pid, + num: nums + 1, + cart_id: item.cart_id, + args: { + index: index, + isadd: isadd, + }, + }) + this.addDisabled = false + } + } else { + if (nums <= 1) { + this.desDisabled = true + } else { + this.desDisabled = false + + store.dispatch('cart/modiCart', { + uid: this.$store.state.user.userInfo.uid, + openid: this.$store.state.user.userInfo.openid, + mp_id: item.mp_id, + sk_id: item.sk_id, + price: item.nowPrice, + pid: item.pid, + num: nums - 1, + cart_id: item.cart_id, + args: { + index: index, + isadd: isadd, + }, + }) + this.desDisabled = true + } + } + + }, + delCart(cart_id, index) { + cart_id = parseInt(cart_id) + uni.showModal({ + title: '是否删除该商品', + success: function (res) { + if (res.confirm) { + store.dispatch('cart/delCart', { + uid: this.$store.state.user.userInfo.uid, + openid: this.$store.state.user.userInfo.openid, + cart_id: cart_id, // 要修改的购物车id + arg: index, // 由于action 传参是能接收两参数，因此将index放入对象 + }) + } + }.bind(this), + }) + // this.cartList.splice(index,1) + }, + }, +} + + + \ No newline at end of file diff --git a/src/pages/confirmOrder/confirmOrder.vue b/src/pages/confirmOrder/confirmOrder.vue index 1d62577..d17b9c5 100644 --- a/src/pages/confirmOrder/confirmOrder.vue +++ b/src/pages/confirmOrder/confirmOrder.vue @@ -52,18 +52,69 @@ > 非常戴镜 - + + + + + + {{item.p_name}} + 支持7天无理由退货 顺丰发货 + + ¥{{Number(item.nowPrice) * item.num}} + ¥{{item.oldPrice*item.num}} + + + - + {{count}} + + + + + + + + 规格 + + {{item.sku_name}}/ + + + 使用人 + {{item.peopleName}} + + 配送方式 快递 + 买家留言 + + + + + + {{goodInfo.p_name}} 支持7天无理由退货 顺丰发货 - ¥{{Number(skuInfo.real_price) * count}} - ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}} + ¥{{buyItem.real_price * count}} + ¥{{buyItem.out_price * count}} 合计 - ¥{{Number(skuInfo.real_price) * count}} + ¥{{totalPrice}} + @@ -164,7 +216,10 @@ - 实付金额:¥{{Number(skuInfo.real_price) * count}} + 实付金额: + ¥{{totalPrice}} + + { if (code === 1) { - console.log('code', code, data) + // console.log('code', code, data) this.showAddress = true this.addressInfo = data } @@ -236,7 +297,7 @@ export default { } else { store.dispatch('address/default').then(({ code, data }) => { if (code === 1) { - console.log('code', code, data) + // console.log('code', code, data) this.showAddress = true this.addressInfo = data } @@ -244,6 +305,25 @@ export default { } }, computed: { + totalPrice(){ + // console.log('isCart',this.isCart) + if(this.isCart == 'true'){ + let total = 0 + this.$store.state.cart.checkedCartLst.map(item =>{ + total += item.nowPrice*item.num + }) + return total + }else{ + return this.buyItem.real_price* this.count + } + }, + buyItem(){ + return this.$store.state.cart.buyItem + }, + // checkedCartLst(){ + // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst) + // return this.$store.state.cart.checkedCartLst + // }, goodInfo() { console.log('state', this.$store.state.read.goodInfo) return this.$store.state.read.goodInfo @@ -259,11 +339,19 @@ export default { }, }, methods: { - counter(isadd) { + counter(isadd,index) { if (isadd) { - this.count++ + if(this.isCart =='true'){ + this.checkedCartLst[index].num++ + }else{ + this.count++ + } } else { - this.count <= 1 ? (this.disabled = true) : this.count-- + if(this.isCart =='true'){ + this.checkedCartLst[index].num<= 1 ? (this.disabled = true) : this.checkedCartLst[index].num-- + }else{ + this.count <= 1 ? (this.disabled = true) : this.count-- + } } }, // 跳转添加地址页面 @@ -272,7 +360,7 @@ export default { url: `../address/addressList?edit=${1}`, success: res => {}, fail: error => { - console.log('跳转到地址列表页面失败====>', error) + // console.log('跳转到地址列表页面失败====>', error) }, complete: () => {}, }) @@ -282,7 +370,7 @@ export default { uni.showLoading({ title: '支付中', }) - console.log('this', this.$store.state) + // console.log('this', this.$store.state) const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param store.dispatch('order/buyNow', { pid: skId.pid, @@ -290,7 +378,7 @@ export default { number: this.count, mp_id: mpId, address: JSON.stringify(this.addressInfo), - totalPrice: Number(this.skuInfo.real_price) * this.count * 100, + totalPrice: this.totalPrice, liuyan: this.note, dir: 1, }).then((res) => { @@ -310,7 +398,7 @@ export default { uid: this.$store.state.user.userInfo.uid, shopid: 0, payCate: 2020, - payMoney: Number(this.skuInfo.real_price) * this.count * 100, + payMoney: this.totalPrice, payWoodId: `fcdj-${uid}-${keyName}`, payWoodDesc: '在【非常戴镜】的微信付款凭证', nonceStr, @@ -331,7 +419,7 @@ export default { appId: data.appid, timeStamp, nonceStr, - total_fee: Number(this.skuInfo.real_price) * this.count * 100, + total_fee: this.totalPrice, package: `prepay_id=${data.prepay_id}`, signType: 'MD5', paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), @@ -609,6 +697,7 @@ export default { align-items: center; position: fixed; bottom: 0; + z-index: 9999; .footerLeft { display: flex; justify-content: center; diff --git a/src/store/modules/cart.js b/src/store/modules/cart.js index 5667687..0fc8bf2 100644 --- a/src/store/modules/cart.js +++ b/src/store/modules/cart.js @@ -4,7 +4,9 @@ import request from '../request' const { cartList, cartModi, cartDel, cartAdd } = urlAlias const state = { - cartList: [], + cartList: [], + checkedCartLst:[], + buyItem:Object } const mutations = { @@ -12,10 +14,7 @@ const mutations = { state.cartList = cartList }, DEL: (state, index) => { - console.log('mutations====>', state.cartList) state.cartList.splice(index, 1) - console.log('mutations====>index', index) - // state.cartList=delList }, MODI: (state, args) => { state.cartList[args.index].num = args.num @@ -48,14 +47,11 @@ const actions = { url: cartModi, data: param, success: (res) => { - console.log('modi-parm', param) commit('MODI', arg) }, fail: (res) => { - console.log('fail status === > ', res) }, complete: (res) => { - console.log('complete status === > ', res) }, })) }, @@ -67,15 +63,11 @@ const actions = { url: cartDel, data: param, success: (res) => { - console.log('del-parm', param) - console.log('del-myparms==>', arg) commit('DEL', arg) }, fail: (res) => { - console.log('fail status === > ', res) }, complete: (res) => { - console.log('complete status === > ', res) }, }) }, -- 2.0.0