吉鹏 / gulu-vue

Download as
Browse Code »

Commit 4ee9880a463061fe600eeb4f226a902875bdd60a

Authored by mullins
2 parents 5bca13074e 37f3387c9a
Exists in master

解决冲突

Showing 14 changed files   Show diff stats
src/components/BottomSheet/BottomSheet.vue
Diff comments   View file @4ee9880
... ... @@ -814,9 +814,10 @@ import store from '@/store'
814 814 mp_id: this.mp_id,
815 815 attrList: this.attrList,
816 816 })
  817 + this.$store.state.cart.buyItem = this.skuItem
817 818 // 跳转到确认订单页面
818 819 uni.navigateTo({
819   - url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
  820 + url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}&isCart=false`,
820 821 })
821 822 }
822 823 },
... ...
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @4ee9880
... ... @@ -77,7 +77,7 @@ image {
77 77 }
78 78 .name {
79 79 width: 92%;
80   - height: 76rpx;
  80 + height: 84rpx;
81 81 padding: 5px 4%;
82 82 box-sizing: border-box;
83 83 display: -webkit-box;
... ...
src/components/uni-swipe-action-item/bindingx.js
Diff comments   View file @4ee9880
... ... @@ -0,0 +1,245 @@
  1 +const BindingX = uni.requireNativePlugin('bindingx');
  2 +const dom = uni.requireNativePlugin('dom');
  3 +const animation = uni.requireNativePlugin('animation');
  4 +
  5 +export default {
  6 + data() {
  7 + return {
  8 + right: 0,
  9 + button: [],
  10 + preventGesture: false
  11 + }
  12 + },
  13 +
  14 + watch: {
  15 + show(newVal) {
  16 + if (!this.position || JSON.stringify(this.position) === '{}') return;
  17 + if (this.autoClose) return
  18 + if (this.isInAnimation) return
  19 + if (newVal) {
  20 + this.open()
  21 + } else {
  22 + this.close()
  23 + }
  24 + },
  25 + },
  26 + created() {
  27 + if (this.swipeaction.children !== undefined) {
  28 + this.swipeaction.children.push(this)
  29 + }
  30 + },
  31 + mounted() {
  32 + this.boxSelector = this.getEl(this.$refs['selector-box-hock']);
  33 + this.selector = this.getEl(this.$refs['selector-content-hock']);
  34 + this.buttonSelector = this.getEl(this.$refs['selector-button-hock']);
  35 + this.position = {}
  36 + this.x = 0
  37 + setTimeout(() => {
  38 + this.getSelectorQuery()
  39 + }, 200)
  40 + },
  41 + beforeDestroy() {
  42 + if (this.timing) {
  43 + BindingX.unbind({
  44 + token: this.timing.token,
  45 + eventType: 'timing'
  46 + })
  47 + }
  48 + if (this.eventpan) {
  49 + BindingX.unbind({
  50 + token: this.eventpan.token,
  51 + eventType: 'pan'
  52 + })
  53 + }
  54 + this.swipeaction.children.forEach((item, index) => {
  55 + if (item === this) {
  56 + this.swipeaction.children.splice(index, 1)
  57 + }
  58 + })
  59 + },
  60 + methods: {
  61 + onClick(index, item) {
  62 + this.$emit('click', {
  63 + content: item,
  64 + index
  65 + })
  66 + },
  67 + touchstart(e) {
  68 + if (this.isInAnimation) return
  69 + if (this.stop) return
  70 + this.stop = true
  71 + if (this.autoClose) {
  72 + this.swipeaction.closeOther(this)
  73 + }
  74 + let endWidth = this.right
  75 + let boxStep = `(x+${this.x})`
  76 + let pageX = `${boxStep}> ${-endWidth} && ${boxStep} < 0?${boxStep}:(x+${this.x} < 0? ${-endWidth}:0)`
  77 +
  78 + let props = [{
  79 + element: this.selector,
  80 + property: 'transform.translateX',
  81 + expression: pageX
  82 + }]
  83 +
  84 + let left = 0
  85 + for (let i = 0; i < this.options.length; i++) {
  86 + let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
  87 + if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
  88 + let moveMix = endWidth - left
  89 + left += this.button[i].width
  90 + let step = `(${this.x}+x)/${endWidth}`
  91 + let moveX = `(${step}) * ${moveMix}`
  92 + let pageButtonX = `${moveX}&& (x+${this.x} > ${-endWidth})?${moveX}:${-moveMix}`
  93 + props.push({
  94 + element: buttonSelectors,
  95 + property: 'transform.translateX',
  96 + expression: pageButtonX
  97 + })
  98 + }
  99 +
  100 + this.eventpan = this._bind(this.boxSelector, props, 'pan', (e) => {
  101 + if (e.state === 'end') {
  102 + this.x = e.deltaX + this.x;
  103 + if (this.x < -endWidth) {
  104 + this.x = -endWidth
  105 + }
  106 + if (this.x > 0) {
  107 + this.x = 0
  108 + }
  109 + this.stop = false
  110 + this.bindTiming();
  111 + }
  112 + })
  113 + },
  114 + touchend(e) {
  115 + this.$nextTick(() => {
  116 + if (this.isopen && !this.isDrag && !this.isInAnimation) {
  117 + this.close()
  118 + }
  119 + })
  120 + },
  121 + bindTiming() {
  122 + if (this.isopen) {
  123 + this.move(this.x, -this.right)
  124 + } else {
  125 + this.move(this.x, -40)
  126 + }
  127 + },
  128 + move(left, value) {
  129 + if (left >= value) {
  130 + this.close()
  131 + } else {
  132 + this.open()
  133 + }
  134 + },
  135 + /**
  136 + * 开启swipe
  137 + */
  138 + open() {
  139 + this.animation(true)
  140 + },
  141 + /**
  142 + * 关闭swipe
  143 + */
  144 + close() {
  145 + this.animation(false)
  146 + },
  147 + /**
  148 + * 开启关闭动画
  149 + * @param {Object} type
  150 + */
  151 + animation(type) {
  152 + this.isDrag = true
  153 + let endWidth = this.right
  154 + let time = 200
  155 + this.isInAnimation = true;
  156 +
  157 + let exit = `t>${time}`;
  158 + let translate_x_expression = `easeOutExpo(t,${this.x},${type?(-endWidth-this.x):(-this.x)},${time})`
  159 + let props = [{
  160 + element: this.selector,
  161 + property: 'transform.translateX',
  162 + expression: translate_x_expression
  163 + }]
  164 +
  165 + let left = 0
  166 + for (let i = 0; i < this.options.length; i++) {
  167 + let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
  168 + if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
  169 + let moveMix = endWidth - left
  170 + left += this.button[i].width
  171 + let step = `${this.x}/${endWidth}`
  172 + let moveX = `(${step}) * ${moveMix}`
  173 + let pageButtonX = `easeOutExpo(t,${moveX},${type ? -moveMix + '-' + moveX: 0 + '-' + moveX},${time})`
  174 + props.push({
  175 + element: buttonSelectors,
  176 + property: 'transform.translateX',
  177 + expression: pageButtonX
  178 + })
  179 + }
  180 +
  181 + this.timing = BindingX.bind({
  182 + eventType: 'timing',
  183 + exitExpression: exit,
  184 + props: props
  185 + }, (e) => {
  186 + if (e.state === 'end' || e.state === 'exit') {
  187 + this.x = type ? -endWidth : 0
  188 + this.isInAnimation = false;
  189 +
  190 + this.isopen = this.isopen || false
  191 + if (this.isopen !== type) {
  192 + this.$emit('change', type)
  193 + }
  194 + this.isopen = type
  195 + this.isDrag = false
  196 + }
  197 + });
  198 + },
  199 + /**
  200 + * 绑定 BindingX
  201 + * @param {Object} anchor
  202 + * @param {Object} props
  203 + * @param {Object} fn
  204 + */
  205 + _bind(anchor, props, eventType, fn) {
  206 + return BindingX.bind({
  207 + anchor,
  208 + eventType,
  209 + props
  210 + }, (e) => {
  211 + typeof(fn) === 'function' && fn(e)
  212 + });
  213 + },
  214 + /**
  215 + * 获取ref
  216 + * @param {Object} el
  217 + */
  218 + getEl(el) {
  219 + return el.ref
  220 + },
  221 + /**
  222 + * 获取节点信息
  223 + */
  224 + getSelectorQuery() {
  225 + dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
  226 + if (this.position.content) return
  227 + this.position.content = data.size
  228 + })
  229 + for (let i = 0; i < this.options.length; i++) {
  230 + dom.getComponentRect(this.$refs['button-hock'][i], (data) => {
  231 + if (!this.button) {
  232 + this.button = []
  233 + }
  234 + if (this.options.length === this.button.length) return
  235 + this.button.push(data.size)
  236 + this.right += data.size.width
  237 + if (this.autoClose) return
  238 + if (this.show) {
  239 + this.open()
  240 + }
  241 + })
  242 + }
  243 + }
  244 + }
  245 +}
... ...
src/components/uni-swipe-action-item/index.wxs
Diff comments   View file @4ee9880
... ... @@ -0,0 +1,204 @@
  1 +/**
  2 + * 监听页面内值的变化,主要用于动态开关swipe-action
  3 + * @param {Object} newValue
  4 + * @param {Object} oldValue
  5 + * @param {Object} ownerInstance
  6 + * @param {Object} instance
  7 + */
  8 +function sizeReady(newValue, oldValue, ownerInstance, instance) {
  9 + var state = instance.getState()
  10 + state.position = JSON.parse(newValue)
  11 + if (!state.position || state.position.length === 0) return
  12 + var show = state.position[0].show
  13 + state.left = state.left || state.position[0].left;
  14 + // 通过用户变量,开启或关闭
  15 + if (show) {
  16 + openState(true, instance, ownerInstance)
  17 + } else {
  18 + openState(false, instance, ownerInstance)
  19 + }
  20 +}
  21 +
  22 +/**
  23 + * 开始触摸操作
  24 + * @param {Object} e
  25 + * @param {Object} ins
  26 + */
  27 +function touchstart(e, ins) {
  28 + var instance = e.instance;
  29 + var state = instance.getState();
  30 + var pageX = e.touches[0].pageX;
  31 + // 开始触摸时移除动画类
  32 + instance.removeClass('ani');
  33 + var owner = ins.selectAllComponents('.button-hock')
  34 + for (var i = 0; i < owner.length; i++) {
  35 + owner[i].removeClass('ani');
  36 + }
  37 + // state.position = JSON.parse(instance.getDataset().position);
  38 + state.left = state.left || state.position[0].left;
  39 + // 获取最终按钮组的宽度
  40 + state.width = pageX - state.left;
  41 + ins.callMethod('closeSwipe')
  42 +}
  43 +
  44 +/**
  45 + * 开始滑动操作
  46 + * @param {Object} e
  47 + * @param {Object} ownerInstance
  48 + */
  49 +function touchmove(e, ownerInstance) {
  50 + var instance = e.instance;
  51 + var disabled = instance.getDataset().disabled
  52 + var state = instance.getState()
  53 + // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  54 + disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
  55 +
  56 + if (disabled) return
  57 + var pageX = e.touches[0].pageX;
  58 + move(pageX - state.width, instance, ownerInstance)
  59 +}
  60 +
  61 +/**
  62 + * 结束触摸操作
  63 + * @param {Object} e
  64 + * @param {Object} ownerInstance
  65 + */
  66 +function touchend(e, ownerInstance) {
  67 + var instance = e.instance;
  68 + var disabled = instance.getDataset().disabled
  69 + var state = instance.getState()
  70 +
  71 + // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  72 + disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
  73 +
  74 + if (disabled) return
  75 + // 滑动过程中触摸结束,通过阙值判断是开启还是关闭
  76 + // fixed by mehaotian 定时器解决点击按钮，touchend 触发比 click 事件时机早的问题 ，主要是 ios13
  77 + moveDirection(state.left, -40, instance, ownerInstance)
  78 +}
  79 +
  80 +/**
  81 + * 设置移动距离
  82 + * @param {Object} value
  83 + * @param {Object} instance
  84 + * @param {Object} ownerInstance
  85 + */
  86 +function move(value, instance, ownerInstance) {
  87 + var state = instance.getState()
  88 + // 获取可滑动范围
  89 + var x = Math.max(-state.position[1].width, Math.min((value), 0));
  90 + state.left = x;
  91 + instance.setStyle({
  92 + transform: 'translateX(' + x + 'px)',
  93 + '-webkit-transform': 'translateX(' + x + 'px)'
  94 + })
  95 + // 折叠按钮动画
  96 + buttonFold(x, instance, ownerInstance)
  97 +}
  98 +
  99 +/**
  100 + * 移动方向判断
  101 + * @param {Object} left
  102 + * @param {Object} value
  103 + * @param {Object} ownerInstance
  104 + * @param {Object} ins
  105 + */
  106 +function moveDirection(left, value, ins, ownerInstance) {
  107 + var state = ins.getState()
  108 + var position = state.position
  109 + var isopen = state.isopen
  110 + if (!position[1].width) {
  111 + openState(false, ins, ownerInstance)
  112 + return
  113 + }
  114 + // 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
  115 + if (isopen) {
  116 + if (-left <= position[1].width) {
  117 + openState(false, ins, ownerInstance)
  118 + } else {
  119 + openState(true, ins, ownerInstance)
  120 + }
  121 + return
  122 + }
  123 + // 如果是关闭状态,进行判断是否打开,还是保留关闭状态
  124 + if (left <= value) {
  125 + openState(true, ins, ownerInstance)
  126 + } else {
  127 + openState(false, ins, ownerInstance)
  128 + }
  129 +}
  130 +
  131 +/**
  132 + * 设置按钮移动距离
  133 + * @param {Object} value
  134 + * @param {Object} instance
  135 + * @param {Object} ownerInstance
  136 + */
  137 +function buttonFold(value, instance, ownerInstance) {
  138 + var ins = ownerInstance.selectAllComponents('.button-hock');
  139 + var state = instance.getState();
  140 + var position = state.position;
  141 + var arr = [];
  142 + var w = 0;
  143 + for (var i = 0; i < ins.length; i++) {
  144 + if (!ins[i].getDataset().button) return
  145 + var btnData = JSON.parse(ins[i].getDataset().button)
  146 +
  147 + // fix by mehaotian TODO 在 app-vue 中,字符串转对象,需要转两次,这里先这么兼容
  148 + if (typeof(btnData) === 'string') {
  149 + btnData = JSON.parse(btnData)
  150 + }
  151 +
  152 + var button = btnData[i] && btnData[i].width || 0
  153 + w += button
  154 + arr.push(-w)
  155 + // 动态计算按钮组每个按钮的折叠动画移动距离
  156 + var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
  157 + if (i != 0) {
  158 + ins[i].setStyle({
  159 + transform: 'translateX(' + distance + 'px)',
  160 + })
  161 + }
  162 + }
  163 +}
  164 +
  165 +/**
  166 + * 开启状态
  167 + * @param {Boolean} type
  168 + * @param {Object} ins
  169 + * @param {Object} ownerInstance
  170 + */
  171 +function openState(type, ins, ownerInstance) {
  172 + var state = ins.getState()
  173 + var position = state.position
  174 + if (state.isopen === undefined) {
  175 + state.isopen = false
  176 + }
  177 + // 只有状态有改变才会通知页面改变状态
  178 + if (state.isopen !== type) {
  179 + // 通知页面,已经打开
  180 + ownerInstance.callMethod('change', {
  181 + open: type
  182 + })
  183 + }
  184 + // 设置打开和移动状态
  185 + state.isopen = type
  186 +
  187 +
  188 + // 添加动画类
  189 + ins.addClass('ani');
  190 + var owner = ownerInstance.selectAllComponents('.button-hock')
  191 + for (var i = 0; i < owner.length; i++) {
  192 + owner[i].addClass('ani');
  193 + }
  194 + // 设置最终移动位置
  195 + move(type ? -position[1].width : 0, ins, ownerInstance)
  196 +
  197 +}
  198 +
  199 +module.exports = {
  200 + sizeReady: sizeReady,
  201 + touchstart: touchstart,
  202 + touchmove: touchmove,
  203 + touchend: touchend
  204 +}
... ...
src/components/uni-swipe-action-item/mpalipay.js
Diff comments   View file @4ee9880
... ... @@ -0,0 +1,160 @@
  1 +export default {
  2 + data() {
  3 + return {
  4 + isshow: false,
  5 + viewWidth: 0,
  6 + buttonWidth: 0,
  7 + disabledView: false,
  8 + x: 0,
  9 + transition: false
  10 + }
  11 + },
  12 + watch: {
  13 + show(newVal) {
  14 + if (this.autoClose) return
  15 + if (newVal) {
  16 + this.open()
  17 + } else {
  18 + this.close()
  19 + }
  20 + },
  21 + },
  22 + created() {
  23 + if (this.swipeaction.children !== undefined) {
  24 + this.swipeaction.children.push(this)
  25 + }
  26 + },
  27 + beforeDestroy() {
  28 + this.swipeaction.children.forEach((item, index) => {
  29 + if (item === this) {
  30 + this.swipeaction.children.splice(index, 1)
  31 + }
  32 + })
  33 + },
  34 + mounted() {
  35 + this.isopen = false
  36 + this.transition = true
  37 + setTimeout(() => {
  38 + this.getQuerySelect()
  39 + }, 50)
  40 +
  41 + },
  42 + methods: {
  43 + onClick(index, item) {
  44 + this.$emit('click', {
  45 + content: item,
  46 + index
  47 + })
  48 + },
  49 + touchstart(e) {
  50 + let {
  51 + pageX,
  52 + pageY
  53 + } = e.changedTouches[0]
  54 + this.transition = false
  55 + this.startX = pageX
  56 + if (this.autoClose) {
  57 + this.swipeaction.closeOther(this)
  58 + }
  59 + },
  60 + touchmove(e) {
  61 + let {
  62 + pageX,
  63 + } = e.changedTouches[0]
  64 + this.slide = this.getSlide(pageX)
  65 + if (this.slide === 0) {
  66 + this.disabledView = false
  67 + }
  68 +
  69 + },
  70 + touchend(e) {
  71 + this.stop = false
  72 + this.transition = true
  73 + if (this.isopen) {
  74 + if (this.moveX === -this.buttonWidth) {
  75 + this.close()
  76 + return
  77 + }
  78 + this.move()
  79 + } else {
  80 + if (this.moveX === 0) {
  81 + this.close()
  82 + return
  83 + }
  84 + this.move()
  85 + }
  86 + },
  87 + open() {
  88 + this.x = this.moveX
  89 + this.$nextTick(() => {
  90 + this.x = -this.buttonWidth
  91 + this.moveX = this.x
  92 +
  93 + if(!this.isopen){
  94 + this.isopen = true
  95 + this.$emit('change', true)
  96 + }
  97 + })
  98 + },
  99 + close() {
  100 + this.x = this.moveX
  101 + this.$nextTick(() => {
  102 + this.x = 0
  103 + this.moveX = this.x
  104 + if(this.isopen){
  105 + this.isopen = false
  106 + this.$emit('change', false)
  107 + }
  108 + })
  109 + },
  110 + move() {
  111 + if (this.slide === 0) {
  112 + this.open()
  113 + } else {
  114 + this.close()
  115 + }
  116 + },
  117 + onChange(e) {
  118 + let x = e.detail.x
  119 + this.moveX = x
  120 + if (x >= this.buttonWidth) {
  121 + this.disabledView = true
  122 + this.$nextTick(() => {
  123 + this.x = this.buttonWidth
  124 + })
  125 + }
  126 + },
  127 + getSlide(x) {
  128 + if (x >= this.startX) {
  129 + this.startX = x
  130 + return 1
  131 + } else {
  132 + this.startX = x
  133 + return 0
  134 + }
  135 +
  136 + },
  137 + getQuerySelect() {
  138 + const query = uni.createSelectorQuery().in(this);
  139 + query.selectAll('.viewWidth-hook').boundingClientRect(data => {
  140 +
  141 + this.viewWidth = data[0].width
  142 + this.buttonWidth = data[1].width
  143 + this.transition = false
  144 + this.$nextTick(() => {
  145 + this.transition = true
  146 + })
  147 +
  148 + if (!this.buttonWidth) {
  149 + this.disabledView = true
  150 + }
  151 +
  152 + if (this.autoClose) return
  153 + if (this.show) {
  154 + this.open()
  155 + }
  156 + }).exec();
  157 +
  158 + }
  159 + }
  160 +}
... ...
src/components/uni-swipe-action-item/mpother.js
Diff comments   View file @4ee9880
... ... @@ -0,0 +1,158 @@
  1 +// #ifdef APP-NVUE
  2 +const dom = weex.requireModule('dom');
  3 +// #endif
  4 +export default {
  5 + data() {
  6 + return {
  7 + uniShow: false,
  8 + left: 0
  9 + }
  10 + },
  11 + computed: {
  12 + moveLeft() {
  13 + return `translateX(${this.left}px)`
  14 + }
  15 + },
  16 + watch: {
  17 + show(newVal) {
  18 + if (!this.position || JSON.stringify(this.position) === '{}') return;
  19 + if (this.autoClose) return
  20 + if (newVal) {
  21 + this.$emit('change', true)
  22 + this.open()
  23 + } else {
  24 + this.$emit('change', false)
  25 + this.close()
  26 + }
  27 + }
  28 + },
  29 + mounted() {
  30 + this.position = {}
  31 + if (this.swipeaction.children !== undefined) {
  32 + this.swipeaction.children.push(this)
  33 + }
  34 + setTimeout(() => {
  35 + this.getSelectorQuery()
  36 + }, 100)
  37 + },
  38 + beforeDestoy() {
  39 + this.swipeaction.children.forEach((item, index) => {
  40 + if (item === this) {
  41 + this.swipeaction.children.splice(index, 1)
  42 + }
  43 + })
  44 + },
  45 + methods: {
  46 + onClick(index, item) {
  47 + this.$emit('click', {
  48 + content: item,
  49 + index
  50 + })
  51 + this.close()
  52 + },
  53 + touchstart(e) {
  54 + const {
  55 + pageX
  56 + } = e.touches[0]
  57 + if (this.disabled) return
  58 + const left = this.position.content.left
  59 + if (this.autoClose) {
  60 + this.swipeaction.closeOther(this)
  61 + }
  62 + this.width = pageX - left
  63 + if (this.isopen) return
  64 + if (this.uniShow) {
  65 + this.uniShow = false
  66 + this.isopen = true
  67 + this.openleft = this.left + this.position.button.width
  68 + }
  69 + },
  70 + touchmove(e, index) {
  71 + if (this.disabled) return
  72 + const {
  73 + pageX
  74 + } = e.touches[0]
  75 + this.setPosition(pageX)
  76 + },
  77 + touchend() {
  78 + if (this.disabled) return
  79 + if (this.isopen) {
  80 + this.move(this.openleft, 0)
  81 + return
  82 + }
  83 + this.move(this.left, -40)
  84 + },
  85 + setPosition(x, y) {
  86 + if (!this.position.button.width) {
  87 + return
  88 + }
  89 + // this.left = x - this.width
  90 + this.setValue(x - this.width)
  91 + },
  92 + setValue(value) {
  93 + // 设置最大最小值
  94 + this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0))
  95 + this.position.content.left = this.left
  96 + if (this.isopen) {
  97 + this.openleft = this.left + this.position.button.width
  98 + }
  99 + },
  100 + move(left, value) {
  101 + if (left >= value) {
  102 + this.$emit('change', false)
  103 + this.close()
  104 + } else {
  105 + this.$emit('change', true)
  106 + this.open()
  107 + }
  108 + },
  109 + open() {
  110 + this.uniShow = true
  111 + this.left = -this.position.button.width
  112 + this.setValue(-this.position.button.width)
  113 + },
  114 + close() {
  115 + this.uniShow = true
  116 + this.setValue(0)
  117 + setTimeout(() => {
  118 + this.uniShow = false
  119 + this.isopen = false
  120 + }, 300)
  121 + },
  122 + getSelectorQuery() {
  123 + // #ifndef APP-NVUE
  124 + const views = uni.createSelectorQuery()
  125 + .in(this)
  126 + views
  127 + .selectAll('.selector-query-hock')
  128 + .boundingClientRect(data => {
  129 + this.position.content = data[1]
  130 + this.position.button = data[0]
  131 + if (this.autoClose) return
  132 + if (this.show) {
  133 + this.open()
  134 + } else {
  135 + this.close()
  136 + }
  137 + })
  138 + .exec()
  139 + // #endif
  140 + // #ifdef APP-NVUE
  141 + dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
  142 + if (this.position.content) return
  143 + this.position.content = data.size
  144 + })
  145 + dom.getComponentRect(this.$refs['selector-button-hock'], (data) => {
  146 + if (this.position.button) return
  147 + this.position.button = data.size
  148 + if (this.autoClose) return
  149 + if (this.show) {
  150 + this.open()
  151 + } else {
  152 + this.close()
  153 + }
  154 + })
  155 + // #endif
  156 + }
  157 + }
  158 +}
... ...
src/components/uni-swipe-action-item/mpwxs.js
Diff comments   View file @4ee9880
... ... @@ -0,0 +1,97 @@
  1 +export default {
  2 + data() {
  3 + return {
  4 + position: [],
  5 + button: []
  6 + }
  7 + },
  8 + computed: {
  9 + pos() {
  10 + return JSON.stringify(this.position)
  11 + },
  12 + btn() {
  13 + return JSON.stringify(this.button)
  14 + }
  15 + },
  16 + watch: {
  17 + show(newVal) {
  18 + if (this.autoClose) return
  19 + let valueObj = this.position[0]
  20 + if (!valueObj) {
  21 + this.init()
  22 + return
  23 + }
  24 + valueObj.show = newVal
  25 + this.$set(this.position, 0, valueObj)
  26 + }
  27 + },
  28 + created() {
  29 + if (this.swipeaction.children !== undefined) {
  30 + this.swipeaction.children.push(this)
  31 + }
  32 + },
  33 + mounted() {
  34 + this.init()
  35 +
  36 + },
  37 + beforeDestroy() {
  38 + this.swipeaction.children.forEach((item, index) => {
  39 + if (item === this) {
  40 + this.swipeaction.children.splice(index, 1)
  41 + }
  42 + })
  43 + },
  44 + methods: {
  45 + init() {
  46 +
  47 + setTimeout(() => {
  48 + this.getSize()
  49 + this.getButtonSize()
  50 + }, 50)
  51 + },
  52 + closeSwipe(e) {
  53 + if (!this.autoClose) return
  54 + this.swipeaction.closeOther(this)
  55 + },
  56 +
  57 + change(e) {
  58 + this.$emit('change', e.open)
  59 + let valueObj = this.position[0]
  60 + if (valueObj.show !== e.open) {
  61 + valueObj.show = e.open
  62 + this.$set(this.position, 0, valueObj)
  63 + }
  64 + },
  65 + onClick(index, item) {
  66 + this.$emit('click', {
  67 + content: item,
  68 + index
  69 + })
  70 + },
  71 + appTouchStart(){},
  72 + appTouchEnd(){},
  73 + getSize() {
  74 + const views = uni.createSelectorQuery().in(this)
  75 + views
  76 + .selectAll('.selector-query-hock')
  77 + .boundingClientRect(data => {
  78 + if (this.autoClose) {
  79 + data[0].show = false
  80 + } else {
  81 + data[0].show = this.show
  82 + }
  83 + this.position = data
  84 + })
  85 + .exec()
  86 + },
  87 + getButtonSize() {
  88 + const views = uni.createSelectorQuery().in(this)
  89 + views
  90 + .selectAll('.button-hock')
  91 + .boundingClientRect(data => {
  92 + this.button = data
  93 + })
  94 + .exec()
  95 + }
  96 + }
  97 +}
... ...
src/components/uni-swipe-action-item/uni-swipe-action-item.vue
Diff comments   View file @4ee9880
... ... @@ -0,0 +1,270 @@
  1 +<template>
  2 + <view class="uni-swipe">
  3 + <!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
  4 + <!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
  5 + <view class="uni-swipe_content">
  6 + <view :data-disabled="disabled" :data-position="pos" :change:prop="swipe.sizeReady" :prop="pos" class="uni-swipe_move-box selector-query-hock move-hock"
  7 + @touchstart="swipe.touchstart" @touchmove="swipe.touchmove" @touchend="swipe.touchend" @change="change">
  8 + <view class="uni-swipe_box">
  9 + <slot />
  10 + </view>
  11 + <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
  12 + <!-- 使用 touchend 解决 ios 13 不触发按钮事件的问题-->
  13 + <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
  14 + backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  15 + fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  16 + }"
  17 + 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>
  18 + </view>
  19 + </view>
  20 + </view>
  21 + <!-- #endif -->
  22 +
  23 + <!-- app nvue端 使用 bindingx -->
  24 + <!-- #ifdef APP-NVUE -->
  25 + <view ref="selector-box-hock" class="uni-swipe_content" @horizontalpan="touchstart" @touchend="touchend">
  26 + <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock" :style="{width:right+'px'}">
  27 + <view ref="button-hock" v-for="(item,index) in options" :key="index" :style="{
  28 + backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',left: right+'px'}"
  29 + 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>
  30 + </view>
  31 + <view ref='selector-content-hock' class="uni-swipe_move-box selector-query-hock">
  32 + <view class="uni-swipe_box">
  33 + <slot />
  34 + </view>
  35 + </view>
  36 + </view>
  37 + <!-- #endif -->
  38 +
  39 + <!-- 在非 app 端、非微信小程序、支付宝小程序、h5端使用 js -->
  40 + <!-- #ifndef APP-PLUS || MP-WEIXIN || MP-ALIPAY || H5 -->
  41 + <view class="uni-swipe_content">
  42 + <view ref="selector-button-hock" class="uni-swipe_button-group selector-query-hock move-hock">
  43 + <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
  44 + backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  45 + fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  46 + }"
  47 + 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>
  48 + </view>
  49 + <view ref='selector-content-hock' class="selector-query-hock" @touchstart="touchstart" @touchmove="touchmove"
  50 + @touchend="touchend" :class="{'ani':uniShow}" :style="{transform:moveLeft}">
  51 + <view class="uni-swipe_move-box" >
  52 + <view class="uni-swipe_box">
  53 + <slot />
  54 + </view>
  55 + </view>
  56 + </view>
  57 + </view>
  58 + <!-- #endif -->
  59 + <!-- #ifdef MP-ALIPAY -->
  60 + <view class="uni-swipe-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
  61 + <view class="viewWidth-hook">
  62 + <movable-area v-if="viewWidth !== 0" class="movable-area" :style="{width:(viewWidth-buttonWidth)+'px'}">
  63 + <movable-view class="movable-view" direction="horizontal" :animation="!transition" :style="{width:viewWidth+'px'}"
  64 + :class="[transition?'transition':'']" :x="x" :disabled="disabledView" @change="onChange">
  65 + <view class="movable-view-box">
  66 + <slot></slot>
  67 + </view>
  68 + </movable-view>
  69 + </movable-area>
  70 + </view>
  71 + <view ref="selector-button-hock" class="uni-swipe_button-group viewWidth-hook">
  72 + <view v-for="(item,index) in options" :data-button="btn" :key="index" :style="{
  73 + backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  74 + fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  75 + }"
  76 + 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>
  77 + </view>
  78 + </view>
  79 + <!-- #endif -->
  80 + </view>
  81 +</template>
  82 +<script src="./index.wxs" module="swipe" lang="wxs"></script>
  83 +<script>
  84 + // #ifdef APP-VUE|| MP-WEIXIN || H5
  85 + import mpwxs from './mpwxs'
  86 + // #endif
  87 +
  88 + // #ifdef APP-NVUE
  89 + import bindingx from './bindingx.js'
  90 + // #endif
  91 +
  92 + // #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
  93 + import mixins from './mpother'
  94 + // #endif
  95 +
  96 + // #ifdef MP-ALIPAY
  97 + import mpalipay from './mpalipay'
  98 + // #endif
  99 +
  100 + /**
  101 + * SwipeActionItem 滑动操作子组件
  102 + * @description 通过滑动触发选项的容器
  103 + * @tutorial https://ext.dcloud.net.cn/plugin?id=181
  104 + * @property {Boolean} show = [true|false] 开启关闭组件，auto-close = false 时生效
  105 + * @property {Boolean} disabled = [true|false] 是否禁止滑动
  106 + * @property {Boolean} autoClose = [true|false] 其他组件开启的时候，当前组件是否自动关闭
  107 + * @property {Array} options 组件选项内容及样式
  108 + * @event {Function} click 点击选项按钮时触发事件，e = {content,index} ，content（点击内容）、index（下标)
  109 + * @event {Function} change 组件打开或关闭时触发，true：开启状态；false：关闭状态
  110 + */
  111 +
  112 + export default {
  113 + // #ifdef APP-VUE|| MP-WEIXIN||H5
  114 + mixins: [mpwxs],
  115 + // #endif
  116 +
  117 + // #ifdef APP-NVUE
  118 + mixins: [bindingx],
  119 + // #endif
  120 +
  121 + // #ifndef APP-PLUS|| MP-WEIXIN || MP-ALIPAY || H5
  122 + mixins: [mixins],
  123 + // #endif
  124 +
  125 + // #ifdef MP-ALIPAY
  126 + mixins: [mpalipay],
  127 + // #endif
  128 +
  129 + props: {
  130 + /**
  131 + * 按钮内容
  132 + */
  133 + options: {
  134 + type: Array,
  135 + default () {
  136 + return []
  137 + }
  138 + },
  139 + /**
  140 + * 禁用
  141 + */
  142 + disabled: {
  143 + type: Boolean,
  144 + default: false
  145 + },
  146 + /**
  147 + * 变量控制开关
  148 + */
  149 + show: {
  150 + type: Boolean,
  151 + default: false
  152 + },
  153 + /**
  154 + * 是否自动关闭
  155 + */
  156 + autoClose: {
  157 + type: Boolean,
  158 + default: true
  159 + }
  160 + },
  161 + inject: ['swipeaction']
  162 +
  163 +
  164 + }
  165 +</script>
  166 +<style lang="scss" scoped>
  167 + .uni-swipe {
  168 + overflow: hidden;
  169 + }
  170 +
  171 + .uni-swipe-box {
  172 + position: relative;
  173 + width: 100%;
  174 + }
  175 +
  176 + .uni-swipe_content {
  177 + flex: 1;
  178 + position: relative;
  179 + }
  180 +
  181 + .uni-swipe_move-box {
  182 + /* #ifndef APP-NVUE */
  183 + display: flex;
  184 + /* #endif */
  185 + position: relative;
  186 + flex-direction: row;
  187 + }
  188 +
  189 + .uni-swipe_box {
  190 + /* #ifndef APP-NVUE */
  191 + display: flex;
  192 + flex-direction: row;
  193 + width: 100%;
  194 + flex-shrink: 0;
  195 + /* #endif */
  196 + /* #ifdef APP-NVUE */
  197 + flex: 1;
  198 + /* #endif */
  199 + font-size: 14px;
  200 + background-color: #fff;
  201 + }
  202 +
  203 + .uni-swipe_button-group {
  204 + /* #ifndef APP-VUE|| MP-WEIXIN||H5 */
  205 + position: absolute;
  206 + top: 0;
  207 + right: 0;
  208 + bottom: 0;
  209 + z-index: 0;
  210 + /* #endif */
  211 + /* #ifndef APP-NVUE */
  212 + display: flex;
  213 + flex-shrink: 0;
  214 + /* #endif */
  215 + flex-direction: row;
  216 + }
  217 +
  218 + .uni-swipe_button {
  219 + /* #ifdef APP-NVUE */
  220 + position: absolute;
  221 + left: 0;
  222 + top: 0;
  223 + bottom: 0;
  224 + /* #endif */
  225 + /* #ifndef APP-NVUE */
  226 + display: flex;
  227 + /* #endif */
  228 + flex-direction: row;
  229 + justify-content: center;
  230 + align-items: center;
  231 + padding: 0 20px;
  232 + }
  233 +
  234 + .uni-swipe_button-text {
  235 + /* #ifndef APP-NVUE */
  236 + flex-shrink: 0;
  237 + /* #endif */
  238 + font-size: 14px;
  239 + }
  240 +
  241 + .ani {
  242 + transition-property: transform;
  243 + transition-duration: 0.3s;
  244 + transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  245 + }
  246 +
  247 + /* #ifdef MP-ALIPAY */
  248 + .movable-area {
  249 + width: 300px;
  250 + height: 100%;
  251 + height: 45px;
  252 + }
  253 +
  254 + .movable-view {
  255 + position: relative;
  256 + width: 160%;
  257 + height: 45px;
  258 + z-index: 2;
  259 + }
  260 + .transition {
  261 + transition: all 0.3s;
  262 + }
  263 +
  264 + .movable-view-box {
  265 + width: 100%;
  266 + height: 100%;
  267 + background-color: #fff;
  268 + }
  269 + /* #endif */
  270 +</style>
... ...
src/components/uni-swipe-action/uni-swipe-action.vue
Diff comments   View file @4ee9880
... ... @@ -0,0 +1,58 @@
  1 +<template>
  2 + <view>
  3 + <slot></slot>
  4 + </view>
  5 +</template>
  6 +
  7 +<script>
  8 + /**
  9 + * SwipeAction 滑动操作
  10 + * @description 通过滑动触发选项的容器
  11 + * @tutorial https://ext.dcloud.net.cn/plugin?id=181
  12 + */
  13 + export default {
  14 + data() {
  15 + return {};
  16 + },
  17 + provide() {
  18 + return {
  19 + swipeaction: this
  20 + }
  21 + },
  22 + created() {
  23 + this.children = []
  24 + },
  25 + methods: {
  26 + closeOther(vm) {
  27 + let children = this.children
  28 + children.forEach((item, index) => {
  29 + if (vm === item) return
  30 + // 支付宝执行以下操作
  31 + // #ifdef MP-ALIPAY
  32 + if (item.isopen) {
  33 + item.close()
  34 + }
  35 + // #endif
  36 +
  37 + // app vue 端、h5 、微信、支付宝 执行以下操作
  38 + // #ifdef APP-VUE || H5 || MP-WEIXIN
  39 + let position = item.position[0]
  40 + let show = position.show
  41 + if (show) {
  42 + position.show = false
  43 + }
  44 + // #endif
  45 +
  46 + // nvue 执行以下操作
  47 + // #ifdef APP-NVUE || MP-BAIDU || MP-QQ || MP-TOUTIAO
  48 + item.close()
  49 + // #endif
  50 + })
  51 + }
  52 + }
  53 + }
  54 +</script>
  55 +
  56 +<style>
  57 +
  58 +</style>
... ...
src/components/uni-transition/uni-transition.vue
Diff comments   View file @4ee9880
... ... @@ -10,7 +10,7 @@
10 10 const animation = uni.requireNativePlugin('animation');
11 11 // #endif
12 12 /**
13   - * Transition 过渡动画
  13 + * Transition 过渡动画
14 14 * @description 简单过渡动画组件
15 15 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
16 16 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
... ...
... ... @@ -57,7 +57,11 @@
57 57 {
58 58 "path": "pages/cart/cart",
59 59 "style": {
60   - "navigationBarTitleText": "购物车"
  60 + "navigationBarTitleText": "购物车",
  61 + // "disableScroll":true,
  62 + "app-plus":{
  63 + "bounce":"none"
  64 + }
61 65 }
62 66 },
63 67 {
... ...
src/pages/cart/cart.vue
Diff comments   View file @4ee9880
1   -<template>
2   - <view class="content">
3   - <block v-if="cartList.length==0">
4   -
5   - </block>
6   - <block v-else>
7   - <view class="card">
8   - <view class="cardHeader">
9   - <view
10   - v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
11   - @click="pClick"
12   - >
13   - <span class="correct"></span>
14   - </view>
15   - <image
16   - src="../../static/store.png"
17   - mode="aspectFill"
18   - ></image>
19   - <text>非常戴镜</text>
20   - </view>
21   - <view
22   - class="cardBody"
23   - v-for="(item,index) in cartList"
24   - :key="index"
25   - @longpress="delCart(item.cart_id,index)"
26   - >
27   - <view
28   - v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
29   - @click="childClick(cartList[index],index)"
30   - >
31   - <span class="correct"></span>
32   - </view>
33   - <view class="imageWrap">
34   - <image
35   - :src="item.img_index_url"
36   - mode="aspectFit"
37   - style="width: 188rpx;height: 168rpx;"
38   - ></image>
39   - </view>
40   - <view class="goodInfo">
41   - <!-- <view class="imageWrap">
42   - <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
43   - </view> -->
44   - <view class="infoRight">
45   - <view
46   - class="goodName"
47   - @tap="toGoods(item.pid,item.sk_id)"
48   - >{{item.p_name}}</view>
49   - <view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
50   - <view class="desL">
51   - <view class="people">
52   - 使用人：{{item.peopleName}}
53   - </view>
54   - <view class="skuInfo">
55   - {{item.sku_name}}
56   - </view>
57   - </view>
58   - <view class="desR">
59   - <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
60   - </view>
61   - </view>
62   - <view class="priceBox">
63   - <view class="price">￥{{item.nowPrice*item.num}}</view>
64   - <text class="maxCount">(限购{{maxCount}}副)</text>
65   - <view class="counter">
66   - <view
67   - class="btn"
68   - disabled="this.addDisabled"
69   - type="default"
70   - @tap="counter(index,false,item)"
71   - >-</view>
72   - <text>{{item.num}}</text>
73   - <view
74   - class="btn"
75   - disabled="this.desDisabled"
76   - type="default"
77   - @tap="counter(index,true,item)"
78   - >+</view>
79   - </view>
80   - </view>
81   - </view>
82   - </view>
83   - </view>
84   - </view>
85   - </block>
86   - <view class="footer">
87   - <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
88   - <view class="footerRight">
89   - <view class="paybtn" @click="toComfirmOrder">立即结算</view>
90   - </view>
91   - </view>
92   - <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
93   - :index="cartIndex"
94   - :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
95   - </view>
96   -</template>
97   -
98   -<script>
99   -
100   -import store from '@/store'
101   -import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
102   -export default {
103   - components:{
104   - BottomSheet,
105   - },
106   - data() {
107   - return {
108   - pid:Number,
109   - isCart:Number,
110   - sk_id:String,
111   - mp_id:String,
112   - isShowBottom : false, //底部弹窗开关
113   - cart_id:Number,
114   - maxCount: 20,
  1 +<template>
  2 + <view class="content">
  3 + <block v-if="cartList.length==0">
  4 +
  5 + </block>
  6 + <block v-else>
  7 + <view class="card">
  8 + <view class="cardHeader">
  9 + <view
  10 + v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
  11 + @click="pClick"
  12 + >
  13 + <span class="correct"></span>
  14 + </view>
  15 + <image
  16 + src="../../static/store.png"
  17 + mode="aspectFill"
  18 + ></image>
  19 + <text>非常戴镜</text>
  20 + </view>
  21 + <view
  22 + class="cardBody"
  23 + v-for="(item,index) in cartList"
  24 + :key="index"
  25 + @longpress="delCart(item.cart_id,index)"
  26 + >
  27 + <view
  28 + v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
  29 + @click="childClick(cartList[index],index)"
  30 + >
  31 + <span class="correct"></span>
  32 + </view>
  33 + <view class="imageWrap">
  34 + <image
  35 + :src="item.img_index_url"
  36 + mode="aspectFit"
  37 + style="width: 188rpx;height: 168rpx;"
  38 + ></image>
  39 + </view>
  40 + <view class="goodInfo">
  41 + <!-- <view class="imageWrap">
  42 + <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
  43 + </view> -->
  44 + <view class="infoRight">
  45 + <view
  46 + class="goodName"
  47 + @tap="toGoods(item.pid,item.sk_id)"
  48 + >{{item.p_name}}</view>
  49 + <view class="describ" @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
  50 + <view class="desL">
  51 + <view class="people">
  52 + 使用人：{{item.peopleName}}
  53 + </view>
  54 + <view class="skuInfo">
  55 + {{item.sku_name}}
  56 + </view>
  57 + </view>
  58 + <view class="desR">
  59 + <image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
  60 + </view>
  61 + </view>
  62 + <view class="priceBox">
  63 + <view class="price">￥{{item.nowPrice*item.num}}</view>
  64 + <text class="maxCount">(限购{{maxCount}}副)</text>
  65 + <view class="counter">
  66 + <view
  67 + class="btn"
  68 + disabled="this.addDisabled"
  69 + type="default"
  70 + @tap="counter(index,false,item)"
  71 + >-</view>
  72 + <text>{{item.num}}</text>
  73 + <view
  74 + class="btn"
  75 + disabled="this.desDisabled"
  76 + type="default"
  77 + @tap="counter(index,true,item)"
  78 + >+</view>
  79 + </view>
  80 + </view>
  81 + </view>
  82 + </view>
  83 + </view>
  84 + </view>
  85 + </block>
  86 + <view class="footer">
  87 + <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
  88 + <view class="footerRight">
  89 + <view class="paybtn" @click="toComfirmOrder">立即结算</view>
  90 + </view>
  91 + </view>
  92 + <BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
  93 + :index="cartIndex"
  94 + :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom" @closeBottom="closeBottom"></BottomSheet>
  95 + </view>
  96 +</template>
  97 +
  98 +<script>
  99 +
  100 +import store from '@/store'
  101 +import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
  102 +export default {
  103 + components:{
  104 + BottomSheet,
  105 + },
  106 + data() {
  107 + return {
  108 + pid:Number,
  109 + isCart:Number,
  110 + sk_id:String,
  111 + mp_id:String,
  112 + isShowBottom : false, //底部弹窗开关
  113 + cart_id:Number,
  114 + maxCount: 20,
115 115 cartIndex:Number,
116 116 cartList:[]
117   - }
118   - },
119   - computed: {
  117 + }
  118 + },
  119 + computed: {
120 120 pIsoPen (){
121 121 if (this.cartList.length > 0){
122 122 return this.cartList.find(item => !item.isChecked) ? false : true;
123 123 }
124 124 return false
125   - },
126   - goodInfo () {
127   - return this.$store.state.read.goodInfo
128   - },
  125 + },
  126 + goodInfo () {
  127 + return this.$store.state.read.goodInfo
  128 + },
129 129 totalPrice() {
130   - let totalPrice = 0
  130 + let totalPrice = 0
131 131 this.cartList.forEach((item)=>{
132 132 if(item.isChecked){
133 133 totalPrice += item.nowPrice * item.num;
134 134 }
135   - })
136   - return totalPrice
137   - }
  135 + })
  136 + return totalPrice
  137 + }
138 138 },
139   - onLoad: async function() {
140   - await this.$store.dispatch('cart/getCartList', {
141   - uid: this.$store.state.user.userInfo.uid, // 用户id
  139 + onShow() {
  140 + this.cartList = this.$store.state.cart.cartList;
  141 + },
  142 + onLoad: async function() {
  143 + await this.$store.dispatch('cart/getCartList', {
  144 + uid: this.$store.state.user.userInfo.uid, // 用户id
142 145 })
143 146  
144 147 this.cartList = this.$store.state.cart.cartList;
145 148 this.cartList.forEach((item)=>{
146 149 item.isChecked = false
147   - })
148   - },
149   - methods: {
150   - //全选按钮
  150 + })
  151 + },
  152 + methods: {
  153 + //全选按钮
151 154 pClick(){
152 155 let pStatus = this.cartList.find(item => !item.isChecked) ? false : true
153 156 let oldList = this.cartList;
... ... @@ -155,361 +158,362 @@ export default {
155 158 item.isChecked = !pStatus
156 159 this.cartList.splice(index,1, item)
157 160 })
158   - },
159   - //单选按钮
  161 + },
  162 + //单选按钮
160 163 childClick(type,index){
161 164 this.cartList[index].isChecked = !this.cartList[index].isChecked
162 165 //vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
163   - this.cartList.splice(index,1, this.cartList[index])
164   - },
165   - //修改购物车
166   - chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
167   - // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
168   - store.dispatch('cart/modiCart', {
169   - uid: this.$store.state.user.userInfo.uid,
170   - openid: this.$store.state.user.userInfo.openid,
171   - mp_id: mp_id,
172   - sk_id: sk_id,
173   - price: price,
174   - pid: pid,
175   - num: num,
176   - cart_id: cart_id,
177   - args: {
178   - index: index,
179   - },
180   - })
181   - store.dispatch('cart/getCartList', {
182   - uid: this.$store.state.user.userInfo.uid, // 用户id
183   - })
184   -
185   - this.$forceUpdate()
186   - // console.log('21212121212',this.cartList)
187   - },
188   - //底部弹窗开关
189   - showBottom(isCart,pid,skId,mp_id,cart_id,index){
190   - store.dispatch('read/fetch', {
191   - pid,
192   - sk_id: skId,
193   - }).then(()=>{
194   - this.cartIndex = index
195   - this.sk_id = skId;
196   - this.pid = pid;
197   - this.mp_id = mp_id;
198   - this.isCart = isCart;
199   - this.cart_id = cart_id;
200   - this.isShowBottom = true;
201   - })
202   - },
203   - closeBottom(){
204   - this.isShowBottom = false;
205   - },
206   - toGoods(id, sk_id) {
207   - uni.navigateTo({
208   - url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
209   - success: res => {},
210   - fail: () => {},
211   - complete: () => {},
212   - })
213   - },
  166 + this.cartList.splice(index,1, this.cartList[index])
  167 + },
  168 + //修改购物车
  169 + chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
  170 + // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
  171 + store.dispatch('cart/modiCart', {
  172 + uid: this.$store.state.user.userInfo.uid,
  173 + openid: this.$store.state.user.userInfo.openid,
  174 + mp_id: mp_id,
  175 + sk_id: sk_id,
  176 + price: price,
  177 + pid: pid,
  178 + num: num,
  179 + cart_id: cart_id,
  180 + args: {
  181 + index: index,
  182 + },
  183 + })
  184 + store.dispatch('cart/getCartList', {
  185 + uid: this.$store.state.user.userInfo.uid, // 用户id
  186 + })
  187 +
  188 + this.$forceUpdate()
  189 + // console.log('21212121212',this.cartList)
  190 + },
  191 + //底部弹窗开关
  192 + showBottom(isCart,pid,skId,mp_id,cart_id,index){
  193 + store.dispatch('read/fetch', {
  194 + pid,
  195 + sk_id: skId,
  196 + }).then(()=>{
  197 + this.cartIndex = index
  198 + this.sk_id = skId;
  199 + this.pid = pid;
  200 + this.mp_id = mp_id;
  201 + this.isCart = isCart;
  202 + this.cart_id = cart_id;
  203 + this.isShowBottom = true;
  204 + })
  205 + },
  206 + closeBottom(){
  207 + this.isShowBottom = false;
  208 + },
  209 + toGoods(id, sk_id) {
  210 + uni.navigateTo({
  211 + url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
  212 + success: res => {},
  213 + fail: () => {},
  214 + complete: () => {},
  215 + })
  216 + },
214 217 toComfirmOrder(){
215   - uni.navigateTo({
216   - url:`../confirmOrder/confirmOrder`,
217   - })
218   - },
219   - counter(index, isadd, item) {
220   - // console.log('item=====>', item)
221   - // console.log('num=====>', item.num)
222   - const nums = parseInt(item.num)
223   - if (isadd) {
224   - if (nums >= this.maxCount) {
225   - this.addDisabled = true
226   - } else {
227   - this.addDisabled = true
228   - store.dispatch('cart/modiCart', {
229   - uid: this.$store.state.user.userInfo.uid,
230   - openid: this.$store.state.user.userInfo.openid,
231   - mp_id: item.mp_id,
232   - sk_id: item.sk_id,
233   - price: item.nowPrice,
234   - pid: item.pid,
235   - num: nums + 1,
236   - cart_id: item.cart_id,
237   - args: {
238   - index: index,
239   - isadd: isadd,
240   - },
241   - })
242   - this.addDisabled = false
243   - }
244   - } else {
245   - if (nums <= 1) {
246   - this.desDisabled = true
247   - } else {
248   - this.desDisabled = false
249   -
250   - store.dispatch('cart/modiCart', {
251   - uid: this.$store.state.user.userInfo.uid,
252   - openid: this.$store.state.user.userInfo.openid,
253   - mp_id: item.mp_id,
254   - sk_id: item.sk_id,
255   - price: item.nowPrice,
256   - pid: item.pid,
257   - num: nums - 1,
258   - cart_id: item.cart_id,
259   - args: {
260   - index: index,
261   - isadd: isadd,
262   - },
263   - })
264   - this.desDisabled = true
265   - }
266   - }
267   -
268   - },
269   - delCart(cart_id, index) {
270   - cart_id = parseInt(cart_id)
271   - uni.showModal({
272   - title: '是否删除该商品',
273   - success: function (res) {
274   - if (res.confirm) {
275   -
276   - store.dispatch('cart/delCart', {
277   - uid: this.$store.state.user.userInfo.uid,
278   - openid: this.$store.state.user.userInfo.openid,
279   - cart_id: cart_id, // 要修改的购物车id
280   - arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
281   - })
282   - }
283   - }.bind(this),
284   - })
285   - },
286   - },
287   -}
288   -</script>
289   -
290   -<style lang="scss">
291   -.content {
292   - min-height: 100vh;
293   - background-color: #f2f2f2;
294   - display: flex;
295   - flex-direction: column;
296   - align-items: center;
297   - justify-content: space-between;
298   - padding: 20rpx 40rpx;
299   - box-sizing: border-box;
300   -
301   - .partentCheck {
302   - width: 16px;
303   - height: 16px;
304   - border-radius: 22px;
305   - border: 1px solid #cfcfcf;
306   - background-color: #ffffff;
307   - margin: 24rpx 12rpx 24rpx 24rpx;
308   - }
309   - .partentChecked {
310   - width: 18px;
311   - height: 18px;
312   - border-radius: 22px;
313   - background-color: #ff6b4a;
314   - margin: 24rpx 12rpx 24rpx 24rpx;
315   - .correct {
316   - display: inline-block;
317   - position: relative;
318   - width: 10rpx;
319   - height: 2rpx;
320   - background: #ffffff;
321   - line-height: 0;
322   - font-size: 0;
323   - position: relative;
324   - top: -7px;
325   - left: 4px;
326   - -webkit-transform: rotate(45deg);
327   - }
328   - .correct:after {
329   - content: "/";
330   - display: block;
331   - width: 16rpx;
332   - height: 2rpx;
333   - background: #ffffff;
334   - -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
335   - }
336   - }
337   -
338   - .card {
339   - background-color: #ffffff;
340   - border-radius: 16rpx;
341   - box-sizing: border-box;
342   - padding: 36rpx 36rpx 36rpx 18rpx;
343   - display: flex;
344   - flex-direction: column;
345   - align-items: center;
346   - justify-content: space-between;
347   - margin-bottom: 180rpx;
348   - .cardHeader {
349   - width: 100%;
350   - height: 36rpx;
351   - display: flex;
352   - align-items: center;
353   - justify-content: flex-start;
354   - margin-bottom: 20rpx;
355   - image {
356   - height: 32rpx;
357   - width: 32rpx;
358   - padding-left: 6px;
359   - padding-right: 10px;
360   - }
361   - text {
362   - // font-family: PingFangSC-Regular;
363   - font-size: 14px;
364   - color: #333333;
365   - letter-spacing: -0.26px;
366   - }
367   - }
368   - .cardBody {
369   - width: 100%;
370   - min-height: 300rpx;
371   - display: flex;
372   - align-items: center;
373   - justify-content: space-between;
374   - .goodInfo {
375   - width: 390rpx;
376   - display: flex;
377   - flex-direction: row;
378   - justify-content: flex-start;
379   - padding-left: 6px;
380   -
381   - .imageWrap {
382   - height: 188rpx;
383   - width: 188rpx;
384   - margin-right: 28rpx;
385   -
386   - image {
387   - border-radius: 4px;
388   - height: 188rpx;
389   - width: 188rpx;
390   - }
391   - }
392   - .infoRight {
393   - display: flex;
394   - flex-direction: column;
395   - align-items: flex-start;
396   - justify-content: space-between;
397   - min-height: 240rpx;
398   - width: 100%;
399   - .goodName {
400   - display: -webkit-box;
401   - -webkit-box-orient: vertical;
402   - -webkit-line-clamp: 2;
403   - text-align: justify;
404   - overflow: hidden;
405   - font-size: 28rpx;
406   - color: #333333;
407   - }
408   - .describ {
409   - width: 100%;
410   - min-height: 80rpx;
411   - background: #F9F9F9;
412   - border-radius: 2px;
413   - box-sizing: border-box;
414   - padding: 10rpx;
415   - font-size: 20rpx;
416   - letter-spacing: -0.23px;
417   - color: #999999;
418   - display: flex;
419   - justify-content: space-between;
420   - align-items: center;
421   - .desL{
422   -
423   - view{
424   - margin: 10rpx 0 10rpx 0 ;
425   - }
426   - }
427   -
428   - }
429   - .priceBox {
430   - display: flex;
431   - justify-content: space-between;
432   - align-items: center;
433   - // margin-top: 26px;
434   - width: 100%;
435   - font-size: 14px;
436   - color: #999999;
437   - .maxCount {
438   - color: #999999;
439   - font-size: 20rpx;
440   - }
441   - .price {
442   - color: #ff6b4a;
443   - font-size: 28rpx;
444   - }
445   - .counter {
446   - display: flex;
447   - flex-direction: row;
448   - justify-content: space-between;
449   - align-items: center;
450   - font-size: 28rpx;
451   - color: #333333;
452   - width: 122rpx;
453   - .btn {
454   - display: flex;
455   - justify-content: center;
456   - line-height: 32rpx;
457   - height: 32rpx;
458   - width: 32rpx;
459   - background-color: #f2f2f2;
460   - color: #cfcfcf;
461   - }
462   - }
463   - }
464   - }
465   - }
466   - }
467   - }
468   - .footer {
469   - position: fixed;
470   - left: 0;
471   - bottom: 0px;
472   - height: 112rpx;
473   - width: 100%;
474   - background-color: #ffffff;
475   - font-size: 16px;
476   - display: flex;
477   - justify-content: space-between;
478   - align-items: center;
479   - .footerLeft {
480   - display: flex;
481   - justify-content: center;
482   - align-items: center;
483   - width: 50%;
484   - color: #333333;
485   - text {
486   - color: #ff6b4a;
487   - }
488   - }
489   - .footerRight {
490   - display: flex;
491   - justify-content: flex-end;
492   - align-items: center;
493   - width: 50%;
494   - margin-right: 26rpx;
495   - .paybtn {
496   - display: flex;
497   - justify-content: center;
498   - align-items: center;
499   - background: #ff6b4a;
500   - border-radius: 20px;
501   - border-radius: 20px;
502   - color: #ffffff;
503   - width: 204rpx;
504   - height: 80rpx;
505   - }
506   - }
507   - }
508   -}
509   -/* 隐藏滚动条 */
510   - ::-webkit-scrollbar {
511   - width: 0;
512   - height: 0;
513   - color: transparent;
514   - }
515   -</style>
  218 + this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
  219 + uni.navigateTo({
  220 + url:`../confirmOrder/confirmOrder?isCart=true`,
  221 + })
  222 + },
  223 + counter(index, isadd, item) {
  224 + // console.log('item=====>', item)
  225 + // console.log('num=====>', item.num)
  226 + const nums = parseInt(item.num)
  227 + if (isadd) {
  228 + if (nums >= this.maxCount) {
  229 + this.addDisabled = true
  230 + } else {
  231 + this.addDisabled = true
  232 + store.dispatch('cart/modiCart', {
  233 + uid: this.$store.state.user.userInfo.uid,
  234 + openid: this.$store.state.user.userInfo.openid,
  235 + mp_id: item.mp_id,
  236 + sk_id: item.sk_id,
  237 + price: item.nowPrice,
  238 + pid: item.pid,
  239 + num: nums + 1,
  240 + cart_id: item.cart_id,
  241 + args: {
  242 + index: index,
  243 + isadd: isadd,
  244 + },
  245 + })
  246 + this.addDisabled = false
  247 + }
  248 + } else {
  249 + if (nums <= 1) {
  250 + this.desDisabled = true
  251 + } else {
  252 + this.desDisabled = false
  253 +
  254 + store.dispatch('cart/modiCart', {
  255 + uid: this.$store.state.user.userInfo.uid,
  256 + openid: this.$store.state.user.userInfo.openid,
  257 + mp_id: item.mp_id,
  258 + sk_id: item.sk_id,
  259 + price: item.nowPrice,
  260 + pid: item.pid,
  261 + num: nums - 1,
  262 + cart_id: item.cart_id,
  263 + args: {
  264 + index: index,
  265 + isadd: isadd,
  266 + },
  267 + })
  268 + this.desDisabled = true
  269 + }
  270 + }
  271 +
  272 + },
  273 + delCart(cart_id, index) {
  274 + cart_id = parseInt(cart_id)
  275 + uni.showModal({
  276 + title: '是否删除该商品',
  277 + success: function (res) {
  278 + if (res.confirm) {
  279 + store.dispatch('cart/delCart', {
  280 + uid: this.$store.state.user.userInfo.uid,
  281 + openid: this.$store.state.user.userInfo.openid,
  282 + cart_id: cart_id, // 要修改的购物车id
  283 + arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
  284 + })
  285 + }
  286 + }.bind(this),
  287 + })
  288 + // this.cartList.splice(index,1)
  289 + },
  290 + },
  291 +}
  292 +</script>
  293 +
  294 +<style lang="scss">
  295 +.content {
  296 + min-height: 100vh;
  297 + background-color: #f2f2f2;
  298 + display: flex;
  299 + flex-direction: column;
  300 + align-items: center;
  301 + justify-content: space-between;
  302 + padding: 20rpx 40rpx;
  303 + box-sizing: border-box;
  304 +
  305 + .partentCheck {
  306 + width: 16px;
  307 + height: 16px;
  308 + border-radius: 22px;
  309 + border: 1px solid #cfcfcf;
  310 + background-color: #ffffff;
  311 + margin: 24rpx 12rpx 24rpx 24rpx;
  312 + }
  313 + .partentChecked {
  314 + width: 18px;
  315 + height: 18px;
  316 + border-radius: 22px;
  317 + background-color: #ff6b4a;
  318 + margin: 24rpx 12rpx 24rpx 24rpx;
  319 + .correct {
  320 + display: inline-block;
  321 + position: relative;
  322 + width: 10rpx;
  323 + height: 2rpx;
  324 + background: #ffffff;
  325 + line-height: 0;
  326 + font-size: 0;
  327 + position: relative;
  328 + top: -7px;
  329 + left: 4px;
  330 + -webkit-transform: rotate(45deg);
  331 + }
  332 + .correct:after {
  333 + content: "/";
  334 + display: block;
  335 + width: 16rpx;
  336 + height: 2rpx;
  337 + background: #ffffff;
  338 + -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
  339 + }
  340 + }
  341 +
  342 + .card {
  343 + background-color: #ffffff;
  344 + border-radius: 16rpx;
  345 + box-sizing: border-box;
  346 + padding: 36rpx 36rpx 36rpx 18rpx;
  347 + display: flex;
  348 + flex-direction: column;
  349 + align-items: center;
  350 + justify-content: space-between;
  351 + margin-bottom: 180rpx;
  352 + .cardHeader {
  353 + width: 100%;
  354 + height: 36rpx;
  355 + display: flex;
  356 + align-items: center;
  357 + justify-content: flex-start;
  358 + margin-bottom: 20rpx;
  359 + image {
  360 + height: 32rpx;
  361 + width: 32rpx;
  362 + padding-left: 6px;
  363 + padding-right: 10px;
  364 + }
  365 + text {
  366 + // font-family: PingFangSC-Regular;
  367 + font-size: 14px;
  368 + color: #333333;
  369 + letter-spacing: -0.26px;
  370 + }
  371 + }
  372 + .cardBody {
  373 + width: 100%;
  374 + min-height: 300rpx;
  375 + display: flex;
  376 + align-items: center;
  377 + justify-content: space-between;
  378 + .goodInfo {
  379 + width: 390rpx;
  380 + display: flex;
  381 + flex-direction: row;
  382 + justify-content: flex-start;
  383 + padding-left: 6px;
  384 +
  385 + .imageWrap {
  386 + height: 188rpx;
  387 + width: 188rpx;
  388 + margin-right: 28rpx;
  389 +
  390 + image {
  391 + border-radius: 4px;
  392 + height: 188rpx;
  393 + width: 188rpx;
  394 + }
  395 + }
  396 + .infoRight {
  397 + display: flex;
  398 + flex-direction: column;
  399 + align-items: flex-start;
  400 + justify-content: space-between;
  401 + min-height: 240rpx;
  402 + width: 100%;
  403 + .goodName {
  404 + display: -webkit-box;
  405 + -webkit-box-orient: vertical;
  406 + -webkit-line-clamp: 2;
  407 + text-align: justify;
  408 + overflow: hidden;
  409 + font-size: 28rpx;
  410 + color: #333333;
  411 + }
  412 + .describ {
  413 + width: 100%;
  414 + min-height: 80rpx;
  415 + background: #F9F9F9;
  416 + border-radius: 2px;
  417 + box-sizing: border-box;
  418 + padding: 10rpx;
  419 + font-size: 20rpx;
  420 + letter-spacing: -0.23px;
  421 + color: #999999;
  422 + display: flex;
  423 + justify-content: space-between;
  424 + align-items: center;
  425 + .desL{
  426 +
  427 + view{
  428 + margin: 10rpx 0 10rpx 0 ;
  429 + }
  430 + }
  431 +
  432 + }
  433 + .priceBox {
  434 + display: flex;
  435 + justify-content: space-between;
  436 + align-items: center;
  437 + // margin-top: 26px;
  438 + width: 100%;
  439 + font-size: 14px;
  440 + color: #999999;
  441 + .maxCount {
  442 + color: #999999;
  443 + font-size: 20rpx;
  444 + }
  445 + .price {
  446 + color: #ff6b4a;
  447 + font-size: 28rpx;
  448 + }
  449 + .counter {
  450 + display: flex;
  451 + flex-direction: row;
  452 + justify-content: space-between;
  453 + align-items: center;
  454 + font-size: 28rpx;
  455 + color: #333333;
  456 + width: 122rpx;
  457 + .btn {
  458 + display: flex;
  459 + justify-content: center;
  460 + line-height: 32rpx;
  461 + height: 32rpx;
  462 + width: 32rpx;
  463 + background-color: #f2f2f2;
  464 + color: #cfcfcf;
  465 + }
  466 + }
  467 + }
  468 + }
  469 + }
  470 + }
  471 + }
  472 + .footer {
  473 + position: fixed;
  474 + left: 0;
  475 + bottom: 0px;
  476 + height: 112rpx;
  477 + width: 100%;
  478 + background-color: #ffffff;
  479 + font-size: 16px;
  480 + display: flex;
  481 + justify-content: space-between;
  482 + align-items: center;
  483 + .footerLeft {
  484 + display: flex;
  485 + justify-content: center;
  486 + align-items: center;
  487 + width: 50%;
  488 + color: #333333;
  489 + text {
  490 + color: #ff6b4a;
  491 + }
  492 + }
  493 + .footerRight {
  494 + display: flex;
  495 + justify-content: flex-end;
  496 + align-items: center;
  497 + width: 50%;
  498 + margin-right: 26rpx;
  499 + .paybtn {
  500 + display: flex;
  501 + justify-content: center;
  502 + align-items: center;
  503 + background: #ff6b4a;
  504 + border-radius: 20px;
  505 + border-radius: 20px;
  506 + color: #ffffff;
  507 + width: 204rpx;
  508 + height: 80rpx;
  509 + }
  510 + }
  511 + }
  512 +}
  513 +/* 隐藏滚动条 */
  514 + ::-webkit-scrollbar {
  515 + width: 0;
  516 + height: 0;
  517 + color: transparent;
  518 + }
  519 +</style>
516 520 \ No newline at end of file
... ...
src/pages/confirmOrder/confirmOrder.vue
Diff comments   View file @4ee9880
... ... @@ -52,18 +52,69 @@
52 52 ></image>
53 53 <text>非常戴镜</text>
54 54 </view>
55   - <view class="infoBox">
  55 +
  56 + <view class="infoBox" v-if="isCart == 'true'" v-for="(item, index) in checkedCartLst" :key="index">
  57 + <view class="infoTop">
  58 + <image
  59 + :src="item.img_index_url"
  60 + mode="aspectFill"
  61 + ></image>
  62 + <view class="infoRight">
  63 + <text class="goodName">{{item.p_name}}</text>
  64 + <text class="remarks">支持7天无理由退货 顺丰发货</text>
  65 + <view class="priceBox">
  66 + <view class="price">¥{{Number(item.nowPrice) * item.num}}<text class="originCost">
  67 + ¥{{item.oldPrice*item.num}}
  68 + </text></view>
  69 + <view class="counter">
  70 + <view
  71 + class="btn"
  72 + disabled="this.disabled"
  73 + type="default"
  74 + @click="counter(false,index)"
  75 + >-</view>
  76 + <text>{{checkedCartLst[index].num}}</text>
  77 + <view
  78 + class="btn"
  79 + type="default"
  80 + @click="counter(true,index)"
  81 + >+</view>
  82 + </view>
  83 + </view>
  84 + </view>
  85 + </view>
  86 + <view class="infoBottom">
  87 + <view class="norm">规格 <text>
  88 + <!-- 长度超出变省略号未做 -->
  89 + <block >{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
  90 + </block>
  91 + </text></view>
  92 + <view class="shippingMethod">使用人 <text>
  93 + {{item.peopleName}}
  94 + </text></view>
  95 + <view class="shippingMethod">配送方式 <text>快递</text></view>
  96 + <view class="message">买家留言
  97 + <input
  98 + type="text"
  99 + :value="note"
  100 + placeholder="建议提前协商(50字以内)"
  101 + />
  102 + </view>
  103 + </view>
  104 + </view>
  105 +
  106 + <view class="infoBox" v-if="isCart !== 'true'">
56 107 <view class="infoTop">
57 108 <image
58   - :src="goodInfo.img_index_url"
  109 + :src="buyItem.pic"
59 110 mode="aspectFill"
60 111 ></image>
61 112 <view class="infoRight">
62 113 <text class="goodName">{{goodInfo.p_name}}</text>
63 114 <text class="remarks">支持7天无理由退货 顺丰发货</text>
64 115 <view class="priceBox">
65   - <view class="price">¥{{Number(skuInfo.real_price) * count}}<text class="originCost">
66   - ¥{{parseInt(skuInfo.real_price * (1 + Number(skuInfo.discount) / 100))}}
  116 + <view class="price">¥{{buyItem.real_price * count}}<text class="originCost">
  117 + ¥{{buyItem.out_price * count}}
67 118 </text></view>
68 119 <view class="counter">
69 120 <view
... ... @@ -149,7 +200,8 @@
149 200 <view class="item">
150 201 <text>合计</text>
151 202 <view class="itemRight">
152   - <view class="total">¥{{Number(skuInfo.real_price) * count}}</view>
  203 + <view class="total">¥{{totalPrice}}</view>
  204 + <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->
153 205 </view>
154 206 </view>
155 207 </view>
... ... @@ -164,7 +216,10 @@
164 216 </view>
165 217 <view class="last_zhanwei"></view>
166 218 <view class="footer">
167   - <view class="footerLeft">实付金额:<text>¥{{Number(skuInfo.real_price) * count}}</text></view>
  219 + <view class="footerLeft">实付金额:
  220 + <text >¥{{totalPrice}}</text>
  221 + <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
  222 + </view>
168 223 <view class="footerRight">
169 224 <view
170 225 class="paybtn"
... ... @@ -193,7 +248,9 @@ export default {
193 248 addressInfo: {
194 249 address: '',
195 250 },
  251 + isCart:Boolean,
196 252 // isAnonymous:
  253 + checkedCartLst:[]
197 254 }
198 255 },
199 256 onShow(addressId) {
... ... @@ -213,13 +270,20 @@ export default {
213 270 }
214 271 },
215 272 onLoad({ pid, addressId,isCart ,count,name}) {
216   - this.pid = pid;
  273 + if(isCart == 'false'){
  274 +
  275 + this.pid = pid;
  276 + store.dispatch('read/fetch', {
  277 + pid,
  278 + })
  279 + }
217 280 this.count = count;
218 281 this.name = name;
219   - store.dispatch('read/fetch', {
220   - pid,
221   - })
222   - console.log('++++++++++++'+pid,addressId,isCart,count)
  282 + this.isCart = isCart;
  283 +
  284 + console.log('++++++++++++'+pid,addressId,isCart)
  285 + this.checkedCartLst = this.$store.state.cart.checkedCartLst
  286 + // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)
223 287 // 若已经选择地址
224 288 if (addressId) {
225 289 store
... ... @@ -228,7 +292,7 @@ export default {
228 292 })
229 293 .then(({ code, data }) => {
230 294 if (code === 1) {
231   - console.log('code', code, data)
  295 + // console.log('code', code, data)
232 296 this.showAddress = true
233 297 this.addressInfo = data
234 298 }
... ... @@ -236,7 +300,7 @@ export default {
236 300 } else {
237 301 store.dispatch('address/default').then(({ code, data }) => {
238 302 if (code === 1) {
239   - console.log('code', code, data)
  303 + // console.log('code', code, data)
240 304 this.showAddress = true
241 305 this.addressInfo = data
242 306 }
... ... @@ -244,6 +308,24 @@ export default {
244 308 }
245 309 },
246 310 computed: {
  311 + totalPrice(){
  312 + if(this.isCart == 'true'){
  313 + let total = 0
  314 + this.$store.state.cart.checkedCartLst.map(item =>{
  315 + total += item.nowPrice*item.num
  316 + })
  317 + return total
  318 + }else{
  319 + return this.buyItem.real_price* this.count
  320 + }
  321 + },
  322 + buyItem(){
  323 + return this.$store.state.cart.buyItem
  324 + },
  325 + // checkedCartLst(){
  326 + // console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)
  327 + // return this.$store.state.cart.checkedCartLst
  328 + // },
247 329 goodInfo() {
248 330 console.log('state', this.$store.state.read.goodInfo)
249 331 return this.$store.state.read.goodInfo
... ... @@ -259,11 +341,19 @@ export default {
259 341 },
260 342 },
261 343 methods: {
262   - counter(isadd) {
  344 + counter(isadd,index) {
263 345 if (isadd) {
264   - this.count++
  346 + if(this.isCart =='true'){
  347 + this.checkedCartLst[index].num++
  348 + }else{
  349 + this.count++
  350 + }
265 351 } else {
266   - this.count <= 1 ? (this.disabled = true) : this.count--
  352 + if(this.isCart =='true'){
  353 + this.checkedCartLst[index].num<= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--
  354 + }else{
  355 + this.count <= 1 ? (this.disabled = true) : this.count--
  356 + }
267 357 }
268 358 },
269 359 // 跳转添加地址页面
... ... @@ -282,20 +372,38 @@ export default {
282 372 uni.showLoading({
283 373 title: '支付中',
284 374 })
285   - console.log('this', this.$store.state)
286   - const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
287   - store.dispatch('order/buyNow', {
288   - pid: skId.pid,
289   - sk_id: skId.sk_id,
290   - number: this.count,
291   - mp_id: mpId,
292   - address: JSON.stringify(this.addressInfo),
293   - totalPrice: Number(this.skuInfo.real_price) * this.count * 100,
294   - liuyan: this.note,
295   - dir: 1,
296   - }).then((res) => {
297   - this.pay(res.data)
298   - })
  375 + if(this.isCart == 'true'){
  376 + const checkedGoods = []
  377 + const sk_id_arr = []
  378 + this.checkedCartLst.map(item=>{
  379 + checkedGoods.push(item.pid)
  380 + sk_id_arr.push(item.sk_id)
  381 + })
  382 + store.dispatch('order/build', {
  383 + uid: this.$store.state.user.userInfo.uid,
  384 + address: JSON.stringify(this.addressInfo),
  385 + checkedGoods:checkedGoods,
  386 + sk_id_arr: sk_id_arr,
  387 + totalPrice: this.totalPrice,
  388 + }).then((res) => {
  389 + this.pay(res.data)
  390 + })
  391 + }
  392 + if(this.isCart == 'false'){
  393 + const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
  394 + store.dispatch('order/buyNow', {
  395 + pid: skId.pid,
  396 + sk_id: skId.sk_id,
  397 + number: this.count,
  398 + mp_id: mpId,
  399 + address: JSON.stringify(this.addressInfo),
  400 + totalPrice: this.totalPrice,
  401 + liuyan: this.note,
  402 + dir: 1,
  403 + }).then((res) => {
  404 + this.pay(res.data)
  405 + })
  406 + }
299 407 },
300 408 // 支付
301 409 pay(res) {
... ... @@ -310,7 +418,7 @@ export default {
310 418 uid: this.$store.state.user.userInfo.uid,
311 419 shopid: 0,
312 420 payCate: 2020,
313   - payMoney: Number(this.skuInfo.real_price) * this.count * 100,
  421 + payMoney: this.totalPrice,
314 422 payWoodId: `fcdj-${uid}-${keyName}`,
315 423 payWoodDesc: '在【非常戴镜】的微信付款凭证',
316 424 nonceStr,
... ... @@ -331,7 +439,7 @@ export default {
331 439 appId: data.appid,
332 440 timeStamp,
333 441 nonceStr,
334   - total_fee: Number(this.skuInfo.real_price) * this.count * 100,
  442 + total_fee: this.totalPrice,
335 443 package: `prepay_id=${data.prepay_id}`,
336 444 signType: 'MD5',
337 445 paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
... ... @@ -609,6 +717,7 @@ export default {
609 717 align-items: center;
610 718 position: fixed;
611 719 bottom: 0;
  720 + z-index: 9999;
612 721 .footerLeft {
613 722 display: flex;
614 723 justify-content: center;
... ...
src/store/modules/cart.js
Diff comments   View file @4ee9880
... ... @@ -4,7 +4,9 @@ import request from &#39;../request&#39;
4 4 const { cartList, cartModi, cartDel, cartAdd } = urlAlias
5 5  
6 6 const state = {
7   - cartList: [],
  7 + cartList: [],
  8 + checkedCartLst:[],
  9 + buyItem:Object
8 10 }
9 11  
10 12 const mutations = {
... ... @@ -12,10 +14,7 @@ const mutations = {
12 14 state.cartList = cartList
13 15 },
14 16 DEL: (state, index) => {
15   - console.log('mutations====>', state.cartList)
16 17 state.cartList.splice(index, 1)
17   - console.log('mutations====>index', index)
18   - // state.cartList=delList
19 18 },
20 19 MODI: (state, args) => {
21 20 state.cartList[args.index].num = args.num
... ... @@ -48,14 +47,11 @@ const actions = {
48 47 url: cartModi,
49 48 data: param,
50 49 success: (res) => {
51   - console.log('modi-parm', param)
52 50 commit('MODI', arg)
53 51 },
54 52 fail: (res) => {
55   - console.log('fail status === > ', res)
56 53 },
57 54 complete: (res) => {
58   - console.log('complete status === > ', res)
59 55 },
60 56 }))
61 57 },
... ... @@ -67,15 +63,11 @@ const actions = {
67 63 url: cartDel,
68 64 data: param,
69 65 success: (res) => {
70   - console.log('del-parm', param)
71   - console.log('del-myparms==>', arg)
72 66 commit('DEL', arg)
73 67 },
74 68 fail: (res) => {
75   - console.log('fail status === > ', res)
76 69 },
77 70 complete: (res) => {
78   - console.log('complete status === > ', res)
79 71 },
80 72 })
81 73 },
... ...