Skip to content

S
singleStore
Commit a2a76c59 authored by 何毅恒's avatar 何毅恒
Browse files
Options

优化立即购买时未登录逻辑

parent 31b8e911
Hide whitespace changes
Inline Side-by-side
Showing with 346 additions and 318 deletions
components/goods-popup/index.vue
View file @ a2a76c59
<template>
<uni-popup ref="goodsPopup" type="bottom" @popchange="popchange">
<view class="wrap w-100" :style="warpFIt">
<view
class="flex j-start a-center"
v-if="goods"
>
<image
class="goods-cover mr-2"
:src="goods.cover"
mode="aspectFit"
/>
<view class="font-28 font-bold">{{goods.title}}</view>
</view>
<scroll-view scroll-y class="sku-list w-100 font-28">
<template v-if="skuData.length">
<view
class="sku-item py-2"
v-for="(item, index) in skuData"
:key="index"
>
<view class="w-100 flex j-between a-center mb-2">
<view class="flex-1">{{item.spec_str}}</view>
<view class="step-wrap">
<!-- <input-number
:defaultVal="item.counts"
:params="{
index
}"
:max="~~item.inventory"
:min="0"
@change="numberChange"
/> -->
<input-number
:defaultVal.sync="item.counts"
:max="~~item.inventory"
:min="0"
@change="numberChange"
/>
</view>
</view>
<view class="w-100 flex j-between a-center">
<view class="flex-1 flex j-start a-center price-txt">
<!-- 如果不是阶梯价 ? 价格 === 0 ? 询价 : 固定售价 -->
<template v-if="goods.is_inquiry === '1'">
<text>询价</text>
</template>
<template v-else>
<text>{{item.price}}</text>
<text class="originPrice ml-1">￥{{item.original_price || 0}}</text>
</template>
</view>
<view class="flex-1 text-center">
<text v-if="item.inventory > 0">{{'库存：' + item.inventory}}</text>
<text v-else class="primaryColor">库存需咨询商家</text>
</view>
<view class="payCount text-center">
<text v-if="~~item.origin_number_sku">{{item.origin_number_sku + item.unit}}起购</text>
</view>
</view>
<view class="mt-2 w-100 descColor flex j-start a-center flex-wrap font-24" v-if="item.is_tiered === '1'">
<view
class="mr-3 mb-2"
v-for="tiered_pri in item.tiered_pri"
:key="tiered_pri.num"
>
￥{{tiered_pri.price }}<text class="ml-1">≥{{tiered_pri.num + item.unit}}</text>
</view>
</view>
</view>
</template>
</scroll-view>
<view class="flex w-100 a-center flex-column font-28 mt-2">
<view class="as-end">
共<text class="primaryColor">{{totalCounts}}</text>{{goods.unit || ''}}
<text class=" ml-2 price primaryColor">￥{{~~goods.is_inquiry ? '--' : totalPrice}}</text>
</view>
</view>
<!-- btn -->
<view class="w-100 btn-wrap flex j-between a-center text-center font-32" :style="btnBottom">
<view class="btn-cart flex-1" @click.stop="handleCart">加入购物车</view>
<view class="btn-pay flex-1" @click.stop="handlePay">立即购买</view>
</view>
</view>
</uni-popup>
<uni-popup ref="goodsPopup" type="bottom" @popchange="popchange">
<view class="wrap w-100" :style="warpFIt">
<view
class="flex j-start a-center"
v-if="goods"
>
<image
class="goods-cover mr-2"
:src="goods.cover"
mode="aspectFit"
/>
<view class="font-28 font-bold">{{ goods.title }}</view>
</view>
<scroll-view scroll-y class="sku-list w-100 font-28">
<template v-if="skuData.length">
<view
class="sku-item py-2"
v-for="(item, index) in skuData"
:key="index"
>
<view class="w-100 flex j-between a-center mb-2">
<view class="flex-1">{{ item.spec_str }}</view>
<view class="step-wrap">
<!-- <input-number
:defaultVal="item.counts"
:params="{
index
}"
:max="~~item.inventory"
:min="0"
@change="numberChange"
/> -->
<input-number
:defaultVal.sync="item.counts"
:max="~~item.inventory"
:min="0"
@change="numberChange"
/>
</view>
</view>
<view class="w-100 flex j-between a-center">
<view class="flex-1 flex j-start a-center price-txt">
<!-- 如果不是阶梯价 ? 价格 === 0 ? 询价 : 固定售价 -->
<template v-if="goods.is_inquiry === '1'">
<text>询价</text>
</template>
<template v-else>
<text>{{ item.price }}</text>
<text class="originPrice ml-1">￥{{ item.original_price || 0 }}</text>
</template>
</view>
<view class="flex-1 text-center">
<text v-if="item.inventory > 0">{{ '库存：' + item.inventory }}</text>
<text v-else class="primaryColor">库存需咨询商家</text>
</view>
<view class="payCount text-center">
<text v-if="~~item.origin_number_sku">{{ item.origin_number_sku + item.unit }}起购</text>
</view>
</view>
<view class="mt-2 w-100 descColor flex j-start a-center flex-wrap font-24" v-if="item.is_tiered === '1'">
<view
class="mr-3 mb-2"
v-for="tiered_pri in item.tiered_pri"
:key="tiered_pri.num"
>
￥{{ tiered_pri.price }}
<text class="ml-1">≥{{ tiered_pri.num + item.unit }}</text>
</view>
</view>
</view>
</template>
</scroll-view>
<view class="flex w-100 a-center flex-column font-28 mt-2">
<view class="as-end">
共
<text class="primaryColor">{{ totalCounts }}</text>
{{ goods.unit || '' }}
<text class=" ml-2 price primaryColor">￥{{ ~~goods.is_inquiry ? '--' : totalPrice }}</text>
</view>
</view>
<!-- btn -->
<view class="w-100 btn-wrap flex j-between a-center text-center font-32" :style="btnBottom">
<view class="btn-cart flex-1" @click.stop="handleCart">加入购物车</view>
<view class="btn-pay flex-1" @click.stop="handlePay">立即购买</view>
</view>
</view>
</uni-popup>
</template>
<script>
import uniPopup from '@/components/uni-popup/index.vue'
import price from '@/components/price/index.vue'
import inputNumber from '@/components/inputNumber/index.vue'
import { addCart } from '@/apis/carts.js'
import {addCart} from '@/apis/carts.js'
import common from './common.js'
import { mapActions, mapState } from 'vuex'
import {mapActions, mapState} from 'vuex'
export default {
name: 'goods-popup',
props: {
fitIphoneX: {
type: Boolean,
default: true
}
},
data() {
return {
goods: null,
skuData: [],
totalCounts: 0,
totalPrice: 0
}
},
components: {
uniPopup,
inputNumber,
price
},
computed: {
...mapState({
isIphoneX: state => state.systemInfo.isIphoneX
}),
btnBottom() {
if(this.fitIphoneX) {
return `bottom: ${this.isIphoneX}px`
} else {
return 'bottom: 0'
}
},
warpFIt() {
if(this.fitIphoneX) {
return `padding-bottom: 186rpx`
} else {
return 'padding-bottom: 118rpx'
}
}
},
methods: {
...common,
...mapActions('cart', ['setCount']),
init() {
// 这个init主要是在关闭弹窗时, 把skuData的初始化,让组件下一次打开重新渲染
this.detail = null
this.skuData = []
this.goods = null
},
/**
* @param {Object} params
* goodsInfo: {
name: 'goods-popup',
props: {
fitIphoneX: {
type: Boolean,
default: true
}
},
data() {
return {
goods: null,
skuData: [],
totalCounts: 0,
totalPrice: 0
}
},
components: {
uniPopup,
inputNumber,
price
},
computed: {
...mapState({
isIphoneX: state => state.systemInfo.isIphoneX
}),
...mapState({
hasToken: state => state.user.token
}),
btnBottom() {
if (this.fitIphoneX) {
return `bottom: ${this.isIphoneX}px`
} else {
return 'bottom: 0'
}
},
warpFIt() {
if (this.fitIphoneX) {
return `padding-bottom: 186rpx`
} else {
return 'padding-bottom: 118rpx'
}
}
},
methods: {
...common,
...mapActions('cart', ['setCount']),
init() {
// 这个init主要是在关闭弹窗时, 把skuData的初始化,让组件下一次打开重新渲染
this.detail = null
this.skuData = []
this.goods = null
},
/**
* @param {Object} params
* goodsInfo: {
cover 封面
title
}
goodsSku sku
*/
async show(params) {
try{
if(!params.skuData) return this.$toast({title: '该商品暂无规格'})
this.goods = params.goodsInfo
this.skuData = JSON.parse(JSON.stringify(params.skuData))
this.skuData.forEach(item => {
item.tiered_pri = item.tiered_pri && typeof item.tiered_pri === 'string' ? JSON.parse(item.tiered_pri) : ''
item.counts = 0
})
this.total()
this.$refs.goodsPopup.open()
}catch(e){
console.log(e)
this.$toast({title: e.msg || '程序错误'})
}
},
hide() {
this.$refs.goodsPopup.close()
},
popchange(e) {
if(!e.show) {
this.init()
}
},
numberChange(e) {
// const idx = e.params.index
// const value = e.val
// this.$set(this.skuData[idx], 'counts', value)
this.total()
},
total() {
const skuData = this.skuData
this.totalCounts = skuData.reduce((pre, cur) => { return pre + ~~cur.counts}, 0)
this.totalPrice = skuData.reduce((pre, cur) => {
const price = +cur.price
const counts = +cur.counts
if(cur.is_tiered === '1') { // 阶梯价 询价不管，不展示，按固定价计算
const tiered_pri = cur.tiered_pri
for(let i = 0, j = tiered_pri.length; i < j; i ++) {
if(counts >= tiered_pri[j-1].num) {
return pre + tiered_pri[j-1].price * counts
} else if(tiered_pri[i].num > counts) {
return pre + (i - 1 >= 0 ? tiered_pri[i - 1].price : price) * counts
}
}
} else {
return pre + price * counts
}
}, 0).toFixed(2)
},
// 加入购物车
handleCart() {
const skuData = this.skuData
if(this.totalCounts === 0) return this.$toast({title: '请选择购买数量'})
// if(!this.judgePay(skuData)) return this.$toast({title: '购买数量不能少于起购数量'})
const fn = []
for(let i = 0, j = skuData.length; i < j; i ++) {
if(skuData[i].counts) {
fn.push(addCart({
goods_id: skuData[i].goods_id,
cart_number: skuData[i].counts,
sku_id: skuData[i].sku_id
}))
}
}
Promise.all(fn)
.then(() => {
this.$toast({title: '加入购物车成功', cb: this.hide})
this.setCount()
})
.catch(err => {
console.log(err)
this.$toast({title: '加入购物车失败'})
})
},
// 下单
handlePay() {
try{
const skuData = this.skuData
if(!skuData.length) return
if(!this.totalCounts) return this.$toast({title: '请选择购买数量'})
if(!this.judgePay(skuData)) return this.$toast({title: '购买数量不能少于起购数量'})
const sku_ids = []
const cart_numbers = []
for(let i = 0, j = skuData.length; i < j; i ++) {
if(skuData[i].counts) {
sku_ids.push(skuData[i].sku_id)
cart_numbers.push(skuData[i].counts)
}
}
const params = {
buy_type: 1,
sku_ids: sku_ids.join(','),
cart_numbers: cart_numbers.join(',')
}
uni.navigateTo({
url: `/pages/order/confirm-order?params=${encodeURIComponent(JSON.stringify(params))}`
})
this.hide()
}catch(e){
console.log(e)
}
}
}
goodsSku sku
*/
async show(params) {
try {
if (!params.skuData) return this.$toast({title: '该商品暂无规格'})
this.goods = params.goodsInfo
this.skuData = JSON.parse(JSON.stringify(params.skuData))
this.skuData.forEach(item => {
item.tiered_pri = item.tiered_pri && typeof item.tiered_pri === 'string' ? JSON.parse(item.tiered_pri) : ''
item.counts = 0
})
this.total()
this.$refs.goodsPopup.open()
} catch (e) {
console.log(e)
this.$toast({title: e.msg || '程序错误'})
}
},
hide() {
this.$refs.goodsPopup.close()
},
popchange(e) {
if (!e.show) {
this.init()
}
},
numberChange(e) {
// const idx = e.params.index
// const value = e.val
// this.$set(this.skuData[idx], 'counts', value)
this.total()
},
total() {
const skuData = this.skuData
this.totalCounts = skuData.reduce((pre, cur) => {
return pre + ~~cur.counts
}, 0)
this.totalPrice = skuData.reduce((pre, cur) => {
const price = +cur.price
const counts = +cur.counts
if (cur.is_tiered === '1') { // 阶梯价 询价不管，不展示，按固定价计算
const tiered_pri = cur.tiered_pri
for (let i = 0, j = tiered_pri.length; i < j; i++) {
if (counts >= tiered_pri[j - 1].num) {
return pre + tiered_pri[j - 1].price * counts
} else if (tiered_pri[i].num > counts) {
return pre + (i - 1 >= 0 ? tiered_pri[i - 1].price : price) * counts
}
}
} else {
return pre + price * counts
}
}, 0).toFixed(2)
},
// 加入购物车
handleCart() {
const skuData = this.skuData
if (this.totalCounts === 0) return this.$toast({title: '请选择购买数量'})
// if(!this.judgePay(skuData)) return this.$toast({title: '购买数量不能少于起购数量'})
const fn = []
for (let i = 0, j = skuData.length; i < j; i++) {
if (skuData[i].counts) {
fn.push(addCart({
goods_id: skuData[i].goods_id,
cart_number: skuData[i].counts,
sku_id: skuData[i].sku_id
}))
}
}
Promise.all(fn)
.then(() => {
this.$toast({title: '加入购物车成功', cb: this.hide})
this.setCount()
})
.catch(err => {
console.log(err)
this.$toast({title: '加入购物车失败'})
})
},
// 下单
handlePay() {
try {
const skuData = this.skuData
if (!skuData.length) return
if (!this.totalCounts) return this.$toast({title: '请选择购买数量'})
if (!this.judgePay(skuData)) return this.$toast({title: '购买数量不能少于起购数量'})
const sku_ids = []
const cart_numbers = []
for (let i = 0, j = skuData.length; i < j; i++) {
if (skuData[i].counts) {
sku_ids.push(skuData[i].sku_id)
cart_numbers.push(skuData[i].counts)
}
}
const params = {
buy_type: 1,
sku_ids: sku_ids.join(','),
cart_numbers: cart_numbers.join(',')
}
// 判断有无登录
if(!this.hasToken){
uni.navigateTo({
url: "/pages/login/index"
})
}else{
uni.navigateTo({
url: `/pages/order/confirm-order?params=${encodeURIComponent(JSON.stringify(params))}`
})
this.hide()
}
} catch (e) {
console.log(e)
}
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
position: relative;
@include borderBox(20rpx, 20rpx);
// padding-bottom: 118rpx;// 20 + 98
background-color: #fff;
.goods-cover {
width: 160rpx;
height: 160rpx;
}
.sku-list {
height: 372rpx;
@include borderBox(0, 20rpx);
.sku-item {
border-bottom: 1rpx solid $line;
}
.step-wrap {
flex: 0 0 224rpx;
width: 224rpx;
height: 64rpx;
}
.payCount {
flex: 0 0 224rpx;
font-size: 20rpx;
color: $desc;
}
.price-txt {
color: $primary;
.originPrice {
color: $desc;
text-decoration: line-through;
}
}
}
.btn-wrap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
height: 98rpx;
.btn-cart, .btn-pay {
color: #fff;
font-weight: bold;
line-height: 98rpx;
}
.btn-cart {
background-color: #FFBB33;
}
.btn-pay {
background-color: $primary;
}
}
position: relative;
@include borderBox(20rpx, 20rpx);
// padding-bottom: 118rpx;// 20 + 98
background-color: #fff;
.goods-cover {
width: 160rpx;
height: 160rpx;
}
.sku-list {
height: 372rpx;
@include borderBox(0, 20rpx);
.sku-item {
border-bottom: 1rpx solid $line;
}
.step-wrap {
flex: 0 0 224rpx;
width: 224rpx;
height: 64rpx;
}
.payCount {
flex: 0 0 224rpx;
font-size: 20rpx;
color: $desc;
}
.price-txt {
color: $primary;
.originPrice {
color: $desc;
text-decoration: line-through;
}
}
}
.btn-wrap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
height: 98rpx;
.btn-cart, .btn-pay {
color: #fff;
font-weight: bold;
line-height: 98rpx;
}
.btn-cart {
background-color: #FFBB33;
}
.btn-pay {
background-color: $primary;
}
}
}
</style>
pages/order/confirm-order.vue
View file @ a2a76c59
......@@ -249,6 +249,7 @@ export default {
async supportCashOnDelivery(shop_id){
const {code,data} = await isSupportCashOnDelivery(shop_id);
this.isSupportCOD = data;
console.log(this.isSupportCOD)
},
......@@ -385,7 +386,6 @@ export default {
const { status, data } = await confirmOrder(form)
if(status) {
cb && typeof cb === 'function' && cb(data.order_sn)
console.log(data)
// const a = await pay({order_sn: data.order_sn, openid: this.openid})
// console.log(a)
// wxPay({params: a.data, })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment