140 lines
3.1 KiB
Vue
140 lines
3.1 KiB
Vue
<script setup>
|
|
// 商品收藏
|
|
|
|
import {
|
|
ref,
|
|
reactive,
|
|
} 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';
|
|
//
|
|
const setting = ref(false)
|
|
// 收藏列表
|
|
const list = reactive({
|
|
data: [],
|
|
})
|
|
|
|
onLoad(() => {
|
|
// 获取列表
|
|
getList()
|
|
})
|
|
|
|
// 获取列表
|
|
function getList() {
|
|
api.shop.getCollectList({}).then(res => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
list.data = res.data
|
|
return
|
|
}
|
|
util.alert({
|
|
content: res.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 规格选择
|
|
* @param {Object} secItem
|
|
*/
|
|
function handleSpec(secItem) {
|
|
//
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
<apex title="商品收藏">
|
|
<template #right>
|
|
<view class="f26" @click="setting = !setting">
|
|
<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="index">
|
|
<!-- 店铺 -->
|
|
<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="secIndex">
|
|
<view class="fmid mr10">
|
|
<template v-if="index == 0">
|
|
<uni-icons type="circle" size="40rpx" color="#aaa" />
|
|
</template>
|
|
<template v-else>
|
|
<uni-icons type="checkbox-filled" size="40rpx" color="#F8BA4D" />
|
|
</template>
|
|
</view>
|
|
|
|
<view class="poster wh160">
|
|
<image class="wh160 br10"
|
|
:src="secItem.sliderImage.split(',')[0]"
|
|
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 thd mtb10 ptb10 plr10 df aic c666 f24 br10" @click="handleSpec(secItem)">
|
|
<text>已选规格： 升级款/小熊</text>
|
|
</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: 180rpx;"></view>
|
|
|
|
<view class="footer rows plr30 bfff shadow">
|
|
<view class="c999 f26">已选择9款</view>
|
|
<view class="col df aic">
|
|
<view class="total mr20" v-if="!setting">
|
|
<text class="c333 f20">合计</text>
|
|
<text class="cFF9B27 f20">￥</text>
|
|
<text class="cFF9B27 f46">98</text>
|
|
</view>
|
|
<view class="btn primary w200">去结算</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 产品
|
|
.item {
|
|
.line+.line {
|
|
border-top: 2rpx solid #eee;
|
|
}
|
|
|
|
// 规格
|
|
.spec {
|
|
border: 2rpx solid #ddd;
|
|
}
|
|
}
|
|
</style> |