jiuyiUniapp/jiuyi2/pages/news/goodsList/index.vue

120 lines
2.4 KiB
Vue

<script setup>
/**
* 客服聊天界面商品列表
*/
import {
reactive,
defineExpose,
} from 'vue'
// 工具库
import util from '@/common/js/util.js'
// api
import api from '@/api/index.js'
import {
onLoad
} from "@dcloudio/uni-app"
// 参数
const listPrototype = reactive({
pageSize: 10,
pageNum: 1,
total: 0,
merId: '',
data: [],
})
onLoad(option => {
getList(option)
})
/**
* 点击列表项
* @param {Object} item 列表项
*/
function handleItem(item) {
//
uni.navigateTo({
url: util.setUrl('/pages/shop/commodity/index', {
productId: item.id
})
})
}
// 重载列表
function refreshList() {
listPrototype.pageNum = 1
listPrototype.total = 0
getList()
}
// 加载更多列表
function getMoreList() {
console.log('getMoreList', listPrototype)
if (listPrototype.total <= listPrototype.data.length) return
listPrototype.pageNum++
getList()
}
// 获取商品
function getList(option) {
let param = {
pageSize: listPrototype.pageSize,
pageNum: listPrototype.pageNum,
merId: option.merId
}
api.shop.getShopProductList(param).then(rs => {
if (rs.code == 200) {
if (listPrototype.pageNum == 1) listPrototype.data.length = []
listPrototype.data.push(...rs.rows)
listPrototype.total = rs.total
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
}).finally(rs => {
uni.stopPullDownRefresh()
})
}
// 发送商品给客服
function sendProduct(item) {
console.log('发送商品', item);
}
defineExpose({
getList,
listPrototype,
refreshList,
getMoreList,
})
</script>
<template>
<view class="list">
<view class="product line df ptb20 plr20" v-for="(item, index) in listPrototype.data" :key="index"
@click="handleItem(item)">
<view class="poster wh160">
<image class="wh160 br10" :src="item.sliderImage.split(',')[0]" mode="aspectFill" />
</view>
<view class="info df fdc jcsb f1 ml20">
<view class="name t2hd c333 f28">{{ item.name }}</view>
<view class="other rows">
<view class="col c333">
<text class="f20">¥</text>
<text class="f30">{{ item.price }}</text>
<text class="count ml20 fs0 c999 f24">销量:{{ item.sales }}</text>
</view>
<view @click.stop="sendProduct(item)" class="btn ti warmHollow plr20">去咨询</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss"></style>