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 @@
+<template>
+ <view class="uni-swipe">
+ <!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
+ <!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
+ <view class="uni-swipe_content">
+ <view :data-disabled="disabled" :data-position="pos" :change:prop="swipe.sizeReady" :prop="pos" class="uni-swipe_move-box selector-query-hock move-hock"
+ @touchstart="swipe.touchstart" @touchmove="swipe.touchmove" @touchend="swipe.touchend" @change="change">
+ <view class="uni-swipe_box">
+ <slot />
+ </view>
+ <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
+ <!-- 使用 touchend 解决 ios 13 不触发按钮事件的问题-->
+ <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
+ backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+ fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+ }"
+ class="uni-swipe_button button-hock" @touchend="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
+ </view>
+ </view>
+ </view>
+ <!-- #endif -->
+
+ <!-- app nvue端 使用 bindingx -->
+ <!-- #ifdef APP-NVUE -->
+ <view ref="selector-box-hock" class="uni-swipe_content" @horizontalpan="touchstart" @touchend="touchend">
+ <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock" :style="{width:right+'px'}">
+ <view ref="button-hock" v-for="(item,index) in options" :key="index" :style="{
+ backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',left: right+'px'}"
+ class="uni-swipe_button " @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'}">{{ item.text }}</text></view>
+ </view>
+ <view ref='selector-content-hock' class="uni-swipe_move-box selector-query-hock">
+ <view class="uni-swipe_box">
+ <slot />
+ </view>
+ </view>
+ </view>
+ <!-- #endif -->
+
+ <!-- 在非 app 端、非微信小程序、支付宝小程序、h5端使用 js -->
+ <!-- #ifndef APP-PLUS || MP-WEIXIN || MP-ALIPAY || H5 -->
+ <view class="uni-swipe_content">
+ <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
+ <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
+ backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+ fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+ }"
+ class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
+ </view>
+ <view ref='selector-content-hock' class="selector-query-hock" @touchstart="touchstart" @touchmove="touchmove"
+ @touchend="touchend" :class="{'ani':uniShow}" :style="{transform:moveLeft}">
+ <view class="uni-swipe_move-box" >
+ <view class="uni-swipe_box">
+ <slot />
+ </view>
+ </view>
+ </view>
+ </view>
+ <!-- #endif -->
+ <!-- #ifdef MP-ALIPAY -->
+ <view class="uni-swipe-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
+ <view class="viewWidth-hook">
+ <movable-area v-if="viewWidth !== 0" class="movable-area" :style="{width:(viewWidth-buttonWidth)+'px'}">
+ <movable-view class="movable-view" direction="horizontal" :animation="!transition" :style="{width:viewWidth+'px'}"
+ :class="[transition?'transition':'']" :x="x" :disabled="disabledView" @change="onChange">
+ <view class="movable-view-box">
+ <slot></slot>
+ </view>
+ </movable-view>
+ </movable-area>
+ </view>
+ <view ref="selector-button-hock" class="uni-swipe_button-group viewWidth-hook">
+ <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
+ backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
+ fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
+ }"
+ class="uni-swipe_button button-hock" @click.stop="onClick(index,item)"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
+ </view>
+ </view>
+ <!-- #endif -->
+ </view>
+</template>
+<script src="./index.wxs" module="swipe" lang="wxs"></script>
+<script>
+ // #ifdef APP-VUE|| MP-WEIXIN || H5
+ import mpwxs from './mpwxs'
+ // #endif
+
+ // #ifdef APP-NVUE
+ import bindingx from './bindingx.js'
+ // #endif
+
+ // #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
+ import mixins from './mpother'
+ // #endif
+
+ // #ifdef MP-ALIPAY
+ import mpalipay from './mpalipay'
+ // #endif
+
+ /**
+ * SwipeActionItem 滑动操作子组件
+ * @description 通过滑动触发选项的容器
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=181
+ * @property {Boolean} show = [true|false] 开启关闭组件，auto-close = false 时生效
+ * @property {Boolean} disabled = [true|false] 是否禁止滑动
+ * @property {Boolean} autoClose = [true|false] 其他组件开启的时候，当前组件是否自动关闭
+ * @property {Array} options 组件选项内容及样式
+ * @event {Function} click 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
+ * @event {Function} change 组件打开或关闭时触发，true：开启状态；false：关闭状态
+ */
+
+ export default {
+ // #ifdef APP-VUE|| MP-WEIXIN||H5
+ mixins: [mpwxs],
+ // #endif
+
+ // #ifdef APP-NVUE
+ mixins: [bindingx],
+ // #endif
+
+ // #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
+ mixins: [mixins],
+ // #endif
+
+ // #ifdef MP-ALIPAY
+ mixins: [mpalipay],
+ // #endif
+
+ props: {
+ /**
+ * 按钮内容
+ */
+ options: {
+ type: Array,
+ default () {
+ return []
+ }
+ },
+ /**
+ * 禁用
+ */
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ /**
+ * 变量控制开关
+ */
+ show: {
+ type: Boolean,
+ default: false
+ },
+ /**
+ * 是否自动关闭
+ */
+ autoClose: {
+ type: Boolean,
+ default: true
+ }
+ },
+ inject: ['swipeaction']
+
+
+ }
+</script>
+<style lang="scss" scoped>
+ .uni-swipe {
+ overflow: hidden;
+ }
+
+ .uni-swipe-box {
+ position: relative;
+ width: 100%;
+ }
+
+ .uni-swipe_content {
+ flex: 1;
+ position: relative;
+ }
+
+ .uni-swipe_move-box {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ position: relative;
+ flex-direction: row;
+ }
+
+ .uni-swipe_box {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ flex-shrink: 0;
+ /* #endif */
+ /* #ifdef APP-NVUE */
+ flex: 1;
+ /* #endif */
+ font-size: 14px;
+ background-color: #fff;
+ }
+
+ .uni-swipe_button-group {
+ /* #ifndef APP-VUE|| MP-WEIXIN||H5 */
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 0;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ display: flex;
+ flex-shrink: 0;
+ /* #endif */
+ flex-direction: row;
+ }
+
+ .uni-swipe_button {
+ /* #ifdef APP-NVUE */
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 0 20px;
+ }
+
+ .uni-swipe_button-text {
+ /* #ifndef APP-NVUE */
+ flex-shrink: 0;
+ /* #endif */
+ font-size: 14px;
+ }
+
+ .ani {
+ transition-property: transform;
+ transition-duration: 0.3s;
+ transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+ }
+
+ /* #ifdef MP-ALIPAY */
+ .movable-area {
+ width: 300px;
+ height: 100%;
+ height: 45px;
+ }
+
+ .movable-view {
+ position: relative;
+ width: 160%;
+ height: 45px;
+ z-index: 2;
+ }
+ .transition {
+ transition: all 0.3s;
+ }
+
+ .movable-view-box {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ }
+ /* #endif */
+</style>
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 @@
+<template>
+ <view>
+ <slot></slot>
+ </view>
+</template>
+
+<script>
+ /**
+ * SwipeAction 滑动操作
+ * @description 通过滑动触发选项的容器
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=181
+ */
+ export default {
+ data() {
+ return {};
+ },
+ provide() {
+ return {
+ swipeaction: this
+ }
+ },
+ created() {
+ this.children = []
+ },
+ methods: {
+ closeOther(vm) {
+ let children = this.children
+ children.forEach((item, index) => {
+ if (vm === item) return
+ // 支付宝执行以下操作
+ // #ifdef MP-ALIPAY
+ if (item.isopen) {
+ item.close()
+ }
+ // #endif
+
+ // app vue 端、h5 、微信、支付宝 执行以下操作
+ // #ifdef APP-VUE || H5 || MP-WEIXIN
+ let position = item.position[0]
+ let show = position.show
+ if (show) {
+ position.show = false
+ }
+ // #endif
+
+ // nvue 执行以下操作
+ // #ifdef APP-NVUE || MP-BAIDU || MP-QQ || MP-TOUTIAO
+ item.close()
+ // #endif
+ })
+ }
+ }
+ }
+</script>
+
+<style>
+
+</style>
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 @@
-<template>
- <view class="content">
- <block v-if="cartList.length==0">
-
- </block>
- <block v-else>
- <view class="card">
- <view class="cardHeader">
- <view
- v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
- @click="pClick"
- >
- <span class="correct"></span>
- </view>
- <image
- src="../../static/store.png"
- mode="aspectFill"
- ></image>
- <text>非常戴镜</text>
- </view>
- <view
- class="cardBody"
- v-for="(item,index) in cartList"
- :key="index"
- @longpress="delCart(item.cart_id,index)"
- >
- <view
- v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
- @click="childClick(cartList[index],index)"
- >
- <span class="correct"></span>
- </view>
- <view class="imageWrap">
- <image
- :src="item.img_index_url"
- mode="aspectFit"
- style="width: 188rpx;height: 168rpx;"
- ></image>
- </view>
- <view class="goodInfo">
- <!-- <view class="imageWrap">
- <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
- </view> -->
- <view class="infoRight">
- <view
- class="goodName"
- @tap="toGoods(item.pid,item.sk_id)"
- >{{item.p_name}}</view>
- <view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
- <view class="desL">
- <view class="people">
- 使用人：{{item.peopleName}}
- </view>
- <view class="skuInfo">
- {{item.sku_name}}
- </view>
- </view>
- <view class="desR">
- <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
- </view>
- </view>
- <view class="priceBox">
- <view class="price">￥{{item.nowPrice*item.num}}</view>
- <text class="maxCount">(限购{{maxCount}}副)</text>
- <view class="counter">
- <view
- class="btn"
- disabled="this.addDisabled"
- type="default"
- @tap="counter(index,false,item)"
- >-</view>
- <text>{{item.num}}</text>
- <view
- class="btn"
- disabled="this.desDisabled"
- type="default"
- @tap="counter(index,true,item)"
- >+</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </block>
- <view class="footer">
- <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
- <view class="footerRight">
- <view class="paybtn" @click="toComfirmOrder">立即结算</view>
- </view>
- </view>
- <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
- :index="cartIndex"
- :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
- </view>
-</template>
-
-<script>
-
-import store from '@/store'
-import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
-export default {
- components:{
- BottomSheet,
- },
- data() {
- return {
- pid:Number,
- isCart:Number,
- sk_id:String,
- mp_id:String,
- isShowBottom : false, //底部弹窗开关
- cart_id:Number,
- maxCount: 20,
+<template>
+ <view class="content">
+ <block v-if="cartList.length==0">
+
+ </block>
+ <block v-else>
+ <view class="card">
+ <view class="cardHeader">
+ <view
+ v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
+ @click="pClick"
+ >
+ <span class="correct"></span>
+ </view>
+ <image
+ src="../../static/store.png"
+ mode="aspectFill"
+ ></image>
+ <text>非常戴镜</text>
+ </view>
+ <view
+ class="cardBody"
+ v-for="(item,index) in cartList"
+ :key="index"
+ @longpress="delCart(item.cart_id,index)"
+ >
+ <view
+ v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
+ @click="childClick(cartList[index],index)"
+ >
+ <span class="correct"></span>
+ </view>
+ <view class="imageWrap">
+ <image
+ :src="item.img_index_url"
+ mode="aspectFit"
+ style="width: 188rpx;height: 168rpx;"
+ ></image>
+ </view>
+ <view class="goodInfo">
+ <!-- <view class="imageWrap">
+ <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
+ </view> -->
+ <view class="infoRight">
+ <view
+ class="goodName"
+ @tap="toGoods(item.pid,item.sk_id)"
+ >{{item.p_name}}</view>
+ <view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
+ <view class="desL">
+ <view class="people">
+ 使用人：{{item.peopleName}}
+ </view>
+ <view class="skuInfo">
+ {{item.sku_name}}
+ </view>
+ </view>
+ <view class="desR">
+ <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
+ </view>
+ </view>
+ <view class="priceBox">
+ <view class="price">￥{{item.nowPrice*item.num}}</view>
+ <text class="maxCount">(限购{{maxCount}}副)</text>
+ <view class="counter">
+ <view
+ class="btn"
+ disabled="this.addDisabled"
+ type="default"
+ @tap="counter(index,false,item)"
+ >-</view>
+ <text>{{item.num}}</text>
+ <view
+ class="btn"
+ disabled="this.desDisabled"
+ type="default"
+ @tap="counter(index,true,item)"
+ >+</view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </block>
+ <view class="footer">
+ <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
+ <view class="footerRight">
+ <view class="paybtn" @click="toComfirmOrder">立即结算</view>
+ </view>
+ </view>
+ <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
+ :index="cartIndex"
+ :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
+ </view>
+</template>
+
+<script>
+
+import store from '@/store'
+import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
+export default {
+ components:{
+ BottomSheet,
+ },
+ data() {
+ return {
+ pid:Number,
+ isCart:Number,
+ sk_id:String,
+ mp_id:String,
+ isShowBottom : false, //底部弹窗开关
+ cart_id:Number,
+ maxCount: 20,
cartIndex:Number,
cartList:[]
- }
- },
- computed: {
+ }
+ },
+ computed: {
pIsoPen (){
if (this.cartList.length > 0){
return this.cartList.find(item => !item.isChecked) ? false : true;
}
return false
- },
- goodInfo () {
- return this.$store.state.read.goodInfo
- },
+ },
+ goodInfo () {
+ return this.$store.state.read.goodInfo
+ },
totalPrice() {
- let totalPrice = 0
+ let totalPrice = 0
this.cartList.forEach((item)=>{
if(item.isChecked){
totalPrice += item.nowPrice * item.num;
}
- })
- return totalPrice
- }
+ })
+ return totalPrice
+ }
},
- onLoad: async function() {
- await this.$store.dispatch('cart/getCartList', {
- uid: this.$store.state.user.userInfo.uid, // 用户id
+ onShow() {
+ this.cartList = this.$store.state.cart.cartList;
+ },
+ onLoad: async function() {
+ await this.$store.dispatch('cart/getCartList', {
+ uid: this.$store.state.user.userInfo.uid, // 用户id
})
this.cartList = this.$store.state.cart.cartList;
this.cartList.forEach((item)=>{
item.isChecked = false
- })
- },
- methods: {
- //全选按钮
+ })
+ },
+ methods: {
+ //全选按钮
pClick(){
let pStatus = this.cartList.find(item => !item.isChecked) ? false : true
let oldList = this.cartList;
@@ -155,361 +158,362 @@ export default {
item.isChecked = !pStatus
this.cartList.splice(index,1, item)
})
- },
- //单选按钮
+ },
+ //单选按钮
childClick(type,index){
this.cartList[index].isChecked = !this.cartList[index].isChecked
//vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
- this.cartList.splice(index,1, this.cartList[index])
- },
- //修改购物车
- chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
- // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
- store.dispatch('cart/modiCart', {
- uid: this.$store.state.user.userInfo.uid,
- openid: this.$store.state.user.userInfo.openid,
- mp_id: mp_id,
- sk_id: sk_id,
- price: price,
- pid: pid,
- num: num,
- cart_id: cart_id,
- args: {
- index: index,
- },
- })
- store.dispatch('cart/getCartList', {
- uid: this.$store.state.user.userInfo.uid, // 用户id
- })
-
- this.$forceUpdate()
- // console.log('21212121212',this.cartList)
- },
- //底部弹窗开关
- showBottom(isCart,pid,skId,mp_id,cart_id,index){
- store.dispatch('read/fetch', {
- pid,
- sk_id: skId,
- }).then(()=>{
- this.cartIndex = index
- this.sk_id = skId;
- this.pid = pid;
- this.mp_id = mp_id;
- this.isCart = isCart;
- this.cart_id = cart_id;
- this.isShowBottom = true;
- })
- },
- closeBottom(){
- this.isShowBottom = false;
- },
- toGoods(id, sk_id) {
- uni.navigateTo({
- url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
- success: res => {},
- fail: () => {},
- complete: () => {},
- })
- },
+ this.cartList.splice(index,1, this.cartList[index])
+ },
+ //修改购物车
+ chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
+ // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
+ store.dispatch('cart/modiCart', {
+ uid: this.$store.state.user.userInfo.uid,
+ openid: this.$store.state.user.userInfo.openid,
+ mp_id: mp_id,
+ sk_id: sk_id,
+ price: price,
+ pid: pid,
+ num: num,
+ cart_id: cart_id,
+ args: {
+ index: index,
+ },
+ })
+ store.dispatch('cart/getCartList', {
+ uid: this.$store.state.user.userInfo.uid, // 用户id
+ })
+
+ this.$forceUpdate()
+ // console.log('21212121212',this.cartList)
+ },
+ //底部弹窗开关
+ showBottom(isCart,pid,skId,mp_id,cart_id,index){
+ store.dispatch('read/fetch', {
+ pid,
+ sk_id: skId,
+ }).then(()=>{
+ this.cartIndex = index
+ this.sk_id = skId;
+ this.pid = pid;
+ this.mp_id = mp_id;
+ this.isCart = isCart;
+ this.cart_id = cart_id;
+ this.isShowBottom = true;
+ })
+ },
+ closeBottom(){
+ this.isShowBottom = false;
+ },
+ toGoods(id, sk_id) {
+ uni.navigateTo({
+ url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
+ success: res => {},
+ fail: () => {},
+ complete: () => {},
+ })
+ },
toComfirmOrder(){
- uni.navigateTo({
- url:`../confirmOrder/confirmOrder`,
- })
- },
- 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),
- })
- },
- },
-}
-</script>
-
-<style lang="scss">
-.content {
- min-height: 100vh;
- background-color: #f2f2f2;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- padding: 20rpx 40rpx;
- box-sizing: border-box;
-
- .partentCheck {
- width: 16px;
- height: 16px;
- border-radius: 22px;
- border: 1px solid #cfcfcf;
- background-color: #ffffff;
- margin: 24rpx 12rpx 24rpx 24rpx;
- }
- .partentChecked {
- width: 18px;
- height: 18px;
- border-radius: 22px;
- background-color: #ff6b4a;
- margin: 24rpx 12rpx 24rpx 24rpx;
- .correct {
- display: inline-block;
- position: relative;
- width: 10rpx;
- height: 2rpx;
- background: #ffffff;
- line-height: 0;
- font-size: 0;
- position: relative;
- top: -7px;
- left: 4px;
- -webkit-transform: rotate(45deg);
- }
- .correct:after {
- content: "/";
- display: block;
- width: 16rpx;
- height: 2rpx;
- background: #ffffff;
- -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
- }
- }
-
- .card {
- background-color: #ffffff;
- border-radius: 16rpx;
- box-sizing: border-box;
- padding: 36rpx 36rpx 36rpx 18rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 180rpx;
- .cardHeader {
- width: 100%;
- height: 36rpx;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- margin-bottom: 20rpx;
- image {
- height: 32rpx;
- width: 32rpx;
- padding-left: 6px;
- padding-right: 10px;
- }
- text {
- // font-family: PingFangSC-Regular;
- font-size: 14px;
- color: #333333;
- letter-spacing: -0.26px;
- }
- }
- .cardBody {
- width: 100%;
- min-height: 300rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .goodInfo {
- width: 390rpx;
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- padding-left: 6px;
-
- .imageWrap {
- height: 188rpx;
- width: 188rpx;
- margin-right: 28rpx;
-
- image {
- border-radius: 4px;
- height: 188rpx;
- width: 188rpx;
- }
- }
- .infoRight {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: space-between;
- min-height: 240rpx;
- width: 100%;
- .goodName {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- text-align: justify;
- overflow: hidden;
- font-size: 28rpx;
- color: #333333;
- }
- .describ {
- width: 100%;
- min-height: 80rpx;
- background: #F9F9F9;
- border-radius: 2px;
- box-sizing: border-box;
- padding: 10rpx;
- font-size: 20rpx;
- letter-spacing: -0.23px;
- color: #999999;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .desL{
-
- view{
- margin: 10rpx 0 10rpx 0 ;
- }
- }
-
- }
- .priceBox {
- display: flex;
- justify-content: space-between;
- align-items: center;
- // margin-top: 26px;
- width: 100%;
- font-size: 14px;
- color: #999999;
- .maxCount {
- color: #999999;
- font-size: 20rpx;
- }
- .price {
- color: #ff6b4a;
- font-size: 28rpx;
- }
- .counter {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- font-size: 28rpx;
- color: #333333;
- width: 122rpx;
- .btn {
- display: flex;
- justify-content: center;
- line-height: 32rpx;
- height: 32rpx;
- width: 32rpx;
- background-color: #f2f2f2;
- color: #cfcfcf;
- }
- }
- }
- }
- }
- }
- }
- .footer {
- position: fixed;
- left: 0;
- bottom: 0px;
- height: 112rpx;
- width: 100%;
- background-color: #ffffff;
- font-size: 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .footerLeft {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 50%;
- color: #333333;
- text {
- color: #ff6b4a;
- }
- }
- .footerRight {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- width: 50%;
- margin-right: 26rpx;
- .paybtn {
- display: flex;
- justify-content: center;
- align-items: center;
- background: #ff6b4a;
- border-radius: 20px;
- border-radius: 20px;
- color: #ffffff;
- width: 204rpx;
- height: 80rpx;
- }
- }
- }
-}
-/* 隐藏滚动条 */
- ::-webkit-scrollbar {
- width: 0;
- height: 0;
- color: transparent;
- }
-</style>
+ 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)
+ },
+ },
+}
+</script>
+
+<style lang="scss">
+.content {
+ min-height: 100vh;
+ background-color: #f2f2f2;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20rpx 40rpx;
+ box-sizing: border-box;
+
+ .partentCheck {
+ width: 16px;
+ height: 16px;
+ border-radius: 22px;
+ border: 1px solid #cfcfcf;
+ background-color: #ffffff;
+ margin: 24rpx 12rpx 24rpx 24rpx;
+ }
+ .partentChecked {
+ width: 18px;
+ height: 18px;
+ border-radius: 22px;
+ background-color: #ff6b4a;
+ margin: 24rpx 12rpx 24rpx 24rpx;
+ .correct {
+ display: inline-block;
+ position: relative;
+ width: 10rpx;
+ height: 2rpx;
+ background: #ffffff;
+ line-height: 0;
+ font-size: 0;
+ position: relative;
+ top: -7px;
+ left: 4px;
+ -webkit-transform: rotate(45deg);
+ }
+ .correct:after {
+ content: "/";
+ display: block;
+ width: 16rpx;
+ height: 2rpx;
+ background: #ffffff;
+ -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
+ }
+ }
+
+ .card {
+ background-color: #ffffff;
+ border-radius: 16rpx;
+ box-sizing: border-box;
+ padding: 36rpx 36rpx 36rpx 18rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 180rpx;
+ .cardHeader {
+ width: 100%;
+ height: 36rpx;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ margin-bottom: 20rpx;
+ image {
+ height: 32rpx;
+ width: 32rpx;
+ padding-left: 6px;
+ padding-right: 10px;
+ }
+ text {
+ // font-family: PingFangSC-Regular;
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: -0.26px;
+ }
+ }
+ .cardBody {
+ width: 100%;
+ min-height: 300rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .goodInfo {
+ width: 390rpx;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ padding-left: 6px;
+
+ .imageWrap {
+ height: 188rpx;
+ width: 188rpx;
+ margin-right: 28rpx;
+
+ image {
+ border-radius: 4px;
+ height: 188rpx;
+ width: 188rpx;
+ }
+ }
+ .infoRight {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ min-height: 240rpx;
+ width: 100%;
+ .goodName {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ text-align: justify;
+ overflow: hidden;
+ font-size: 28rpx;
+ color: #333333;
+ }
+ .describ {
+ width: 100%;
+ min-height: 80rpx;
+ background: #F9F9F9;
+ border-radius: 2px;
+ box-sizing: border-box;
+ padding: 10rpx;
+ font-size: 20rpx;
+ letter-spacing: -0.23px;
+ color: #999999;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .desL{
+
+ view{
+ margin: 10rpx 0 10rpx 0 ;
+ }
+ }
+
+ }
+ .priceBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ // margin-top: 26px;
+ width: 100%;
+ font-size: 14px;
+ color: #999999;
+ .maxCount {
+ color: #999999;
+ font-size: 20rpx;
+ }
+ .price {
+ color: #ff6b4a;
+ font-size: 28rpx;
+ }
+ .counter {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 28rpx;
+ color: #333333;
+ width: 122rpx;
+ .btn {
+ display: flex;
+ justify-content: center;
+ line-height: 32rpx;
+ height: 32rpx;
+ width: 32rpx;
+ background-color: #f2f2f2;
+ color: #cfcfcf;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .footer {
+ position: fixed;
+ left: 0;
+ bottom: 0px;
+ height: 112rpx;
+ width: 100%;
+ background-color: #ffffff;
+ font-size: 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .footerLeft {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 50%;
+ color: #333333;
+ text {
+ color: #ff6b4a;
+ }
+ }
+ .footerRight {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ width: 50%;
+ margin-right: 26rpx;
+ .paybtn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #ff6b4a;
+ border-radius: 20px;
+ border-radius: 20px;
+ color: #ffffff;
+ width: 204rpx;
+ height: 80rpx;
+ }
+ }
+ }
+}
+/* 隐藏滚动条 */
+ ::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ color: transparent;
+ }
+</style>
\ 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 @@
></image>
<text>非常戴镜</text>
</view>
- <view class="infoBox">
+
+ <view class="infoBox" v-if="isCart == 'true'" v-for="(item, index) in checkedCartLst" :key="index">
+ <view class="infoTop">
+ <image
+ :src="item.img_index_url"
+ mode="aspectFill"
+ ></image>
+ <view class="infoRight">
+ <text class="goodName">{{item.p_name}}</text>
+ <text class="remarks">支持7天无理由退货 顺丰发货</text>
+ <view class="priceBox">
+ <view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost">
+ ¥{{item.oldPrice*item.num}}
+ </text></view>
+ <view class="counter">
+ <view
+ class="btn"
+ disabled="this.disabled"
+ type="default"
+ @click="counter(false,index)"
+ >-</view>
+ <text>{{count}}</text>
+ <view
+ class="btn"
+ type="default"
+ @click="counter(true,index)"
+ >+</view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="infoBottom">
+ <view class="norm">规格 <text>
+ <!-- 长度超出变省略号未做 -->
+ <block >{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
+ </block>
+ </text></view>
+ <view class="shippingMethod">使用人 <text>
+ {{item.peopleName}}
+ </text></view>
+ <view class="shippingMethod">配送方式 <text>快递</text></view>
+ <view class="message">买家留言
+ <input
+ type="text"
+ :value="note"
+ placeholder="建议提前协商(50字以内)"
+ />
+ </view>
+ </view>
+ </view>
+
+ <view class="infoBox" v-if="isCart !== 'true'">
<view class="infoTop">
<image
- :src="goodInfo.img_index_url"
+ :src="buyItem.pic"
mode="aspectFill"
></image>
<view class="infoRight">
<text class="goodName">{{goodInfo.p_name}}</text>
<text class="remarks">支持7天无理由退货 顺丰发货</text>
<view class="priceBox">
- <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
- ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
+ <view class="price">¥{{buyItem.real_price * count}}<text class="originCost">
+ ¥{{buyItem.out_price * count}}
</text></view>
<view class="counter">
<view
@@ -149,7 +200,8 @@
<view class="item">
<text>合计</text>
<view class="itemRight">
- <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
+ <view class="total">¥{{totalPrice}}</view>
+ <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->
</view>
</view>
</view>
@@ -164,7 +216,10 @@
</view>
<view class="last_zhanwei"></view>
<view class="footer">
- <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
+ <view class="footerLeft">实付金额:
+ <text >¥{{totalPrice}}</text>
+ <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
+ </view>
<view class="footerRight">
<view
class="paybtn"
@@ -193,7 +248,9 @@ export default {
addressInfo: {
address: '',
},
+ isCart:Boolean,
// isAnonymous:
+ checkedCartLst:[]
}
},
onShow(addressId) {
@@ -216,10 +273,14 @@ export default {
this.pid = pid;
this.count = count;
this.name = name;
+ this.isCart = isCart;
store.dispatch('read/fetch', {
pid,
})
- console.log('++++++++++++'+pid,addressId,isCart,count)
+
+ console.log('++++++++++++'+pid,addressId,isCart)
+ this.checkedCartLst = this.$store.state.cart.checkedCartLst
+ // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)
// 若已经选择地址
if (addressId) {
store
@@ -228,7 +289,7 @@ export default {
})
.then(({ code, data }) => {
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)
},
})
},