271 lines
6.5 KiB
Vue
271 lines
6.5 KiB
Vue
<script setup>
|
||
// 商品收藏
|
||
|
||
import {
|
||
ref,
|
||
reactive,
|
||
computed,
|
||
getCurrentInstance,
|
||
} from 'vue';
|
||
import apex from '@/components/header/apex'
|
||
import {
|
||
onReachBottom,
|
||
onPullDownRefresh,
|
||
onShow,
|
||
onLoad,
|
||
onReady,
|
||
} from '@dcloudio/uni-app';
|
||
//
|
||
import api from '@/api/index.js';
|
||
// util
|
||
import util from '@/common/js/util';
|
||
// 生成订单
|
||
import makeOrder from '@/components/shop/detail/makeOrder.vue'
|
||
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance()
|
||
//
|
||
const setting = ref(false)
|
||
// 当前操作的收藏下标
|
||
const listCurrent = reactive([0, 0])
|
||
// 收藏列表
|
||
const list = reactive({
|
||
data: [],
|
||
})
|
||
// 已选的商品列表
|
||
const selectList = computed(() => {
|
||
let result = []
|
||
list.data.map(item => {
|
||
result.push(...item.shopifyProductInfos.filter(secItem => secItem.selected))
|
||
})
|
||
return result
|
||
})
|
||
// 总价
|
||
const totalPrice = computed(() => {
|
||
return selectList.value.reduce((last, current) => {
|
||
return last + current.price * current.payNum
|
||
}, 0)
|
||
})
|
||
// 当前商品
|
||
const productCurrent = computed({
|
||
get() {
|
||
let result = {}
|
||
if (list.data[listCurrent[0]]) result = list.data[listCurrent[0]].shopifyProductInfos[listCurrent[
|
||
1]]
|
||
return result
|
||
},
|
||
set(val) {
|
||
list.data[listCurrent[0]].shopifyProductInfos[listCurrent[1]] = val
|
||
}
|
||
})
|
||
|
||
onLoad(() => {
|
||
// 获取列表
|
||
getList()
|
||
})
|
||
|
||
// 获取列表
|
||
function getList() {
|
||
api.shop.getCollectList({}).then(res => {
|
||
if (res.code == 200) {
|
||
// 收藏列表的数据
|
||
list.data = res.data.map(item => {
|
||
// 收藏列表里面的商品
|
||
item.shopifyProductInfos = item.shopifyProductInfos.map(secItem => {
|
||
// 产品图片
|
||
secItem.formatSliderImage = secItem.sliderImage.split(',')[0]
|
||
// 产品购买数量
|
||
secItem.payNum = 1
|
||
// 产品规格的索引
|
||
secItem.spaceIndex = 0
|
||
// 产品购买规格
|
||
secItem.spec = secItem.specs[secItem.spaceIndex] || {}
|
||
// 是否选择
|
||
secItem.selected = false
|
||
return secItem
|
||
})
|
||
return item
|
||
})
|
||
return
|
||
}
|
||
util.alert({
|
||
content: res.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 规格选择
|
||
* @param {Object} index
|
||
* @param {Object} secIndex
|
||
*/
|
||
function handleSpec(index, secIndex) {
|
||
Object.assign(listCurrent, [index, secIndex])
|
||
proxy.$refs.makeOrderRef.open({
|
||
spaceIndex: productCurrent.value.spaceIndex,
|
||
payNum: productCurrent.value.payNum,
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 选择规格和数量
|
||
* @param {Object} event
|
||
*/
|
||
function handleMakeConfirm(event) {
|
||
productCurrent.value.payNum = event.payNum
|
||
productCurrent.value.spec = event.spec
|
||
productCurrent.value.spaceIndex = event.spaceIndex
|
||
}
|
||
|
||
/**
|
||
* 商品的选中
|
||
* @param {Object} index 商家下标
|
||
* @param {Object} secIndex 商品下标
|
||
*/
|
||
function handleSelect(index, secIndex) {
|
||
const item = list.data[index].shopifyProductInfos[secIndex]
|
||
item.selected = !item.selected
|
||
}
|
||
|
||
// 取消收藏
|
||
function handleCancelCollect() {
|
||
console.log('data', selectList.value, list.data)
|
||
}
|
||
|
||
// 提交
|
||
function handleSubmit() {
|
||
console.log('data', selectList.value, list.data)
|
||
// 验证必填项
|
||
if (selectList.value.length == 0) {
|
||
util.alert('请选择商品')
|
||
return
|
||
}
|
||
|
||
let data = selectList.value.map(item => {
|
||
return {
|
||
// 产品id
|
||
productId: item.id,
|
||
// 规格id
|
||
attrValueId: item.spec.id,
|
||
// 数量
|
||
payNum: item.payNum,
|
||
// 0-普通订单，1-视频号订单
|
||
orderType: 0,
|
||
}
|
||
})
|
||
|
||
console.log('request data', data)
|
||
// 产生待付款订单
|
||
api.shop.addOrder({
|
||
data,
|
||
}).then(rs => {
|
||
if (rs.code === 200) {
|
||
// 如果返回了订单 继续支付订单
|
||
if (rs.data && rs.data[0]) uni.navigateTo({
|
||
url: util.setUrl('/pages/shop/commodity/payment', {
|
||
orderId: rs.data[0].orderId,
|
||
})
|
||
})
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<apex title="商品收藏">
|
||
<template #right>
|
||
<view class="f26" @click="setting = !setting" v-if="0">
|
||
<text v-if="setting">完成</text>
|
||
<text v-else>管理</text>
|
||
</view>
|
||
</template>
|
||
</apex>
|
||
|
||
<view class="list">
|
||
<view class="item oh mb20 plr30 bfff" v-for="(item,index) in list.data" :key="item.id">
|
||
<!-- 店铺 -->
|
||
<view class="store line df aic ptb20 thd f1 f28">
|
||
<image class="wh50 br10" :src="item.rectangleLogo" mode="aspectFill" />
|
||
<view class="name ml10 c333">{{item.name}}</view>
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="product line df ptb20" v-for="(secItem,secIndex) in item.shopifyProductInfos"
|
||
:key="secItem.id">
|
||
<view class="fmid mr10" @click="handleSelect(index,secIndex)" v-if="0">
|
||
<template v-if="secItem.selected">
|
||
<uni-icons type="checkbox-filled" size="40rpx" color="#F8BA4D" />
|
||
</template>
|
||
<template v-else>
|
||
<uni-icons type="circle" size="40rpx" color="#aaa" />
|
||
</template>
|
||
</view>
|
||
|
||
<view class="poster wh160">
|
||
<image class="wh160 br10" :src="secItem.formatSliderImage" mode="aspectFill" />
|
||
</view>
|
||
|
||
<view class="info oh df fdc jcsb f1 ml20">
|
||
<view class="name thd c333 f28">{{item.name}}</view>
|
||
|
||
<view class="spec line df aic thd mtb10 ptb10 plr10 df aic c666 f24 br10"
|
||
@click="handleSpec(index,secIndex)">
|
||
<view class="thd f1">已选规格： {{secItem.spec.sku}}</view>
|
||
<view class="">x{{secItem.payNum}}</view>
|
||
</view>
|
||
|
||
<view class="other df aic">
|
||
<view class="price c333">
|
||
<text class="f20">￥</text>
|
||
<text class="f30">{{secItem.price}}</text>
|
||
</view>
|
||
<view class="count ml20 fs0 c999 f24">销量：{{secItem.sales}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fill" style="height: 30rpx;"></view>
|
||
|
||
<view class="footer rows plr30 bfff shadow" v-if="0">
|
||
<view class="c999 f26">已选择{{selectList.length}}款</view>
|
||
<view class="col df aic" v-if="!setting">
|
||
<view class="total mr20">
|
||
<text class="c333 f20">合计</text>
|
||
<text class="cFF9B27 f20">￥</text>
|
||
<text class="cFF9B27 f46">{{totalPrice}}</text>
|
||
</view>
|
||
<view class="btn primary w200" @click="handleSubmit">去结算</view>
|
||
</view>
|
||
|
||
<view class="btn primary w200" @click="handleCancelCollect" v-else>取消收藏</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 立即支付 -->
|
||
<makeOrder ref="makeOrderRef" mode="collect" :detail="productCurrent" @confirm="handleMakeConfirm" />
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
// 产品
|
||
.item {
|
||
.line+.line {
|
||
border-top: 2rpx solid #eee;
|
||
}
|
||
|
||
// 规格
|
||
.spec {
|
||
border: 2rpx solid #ddd;
|
||
}
|
||
}
|
||
</style> |