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