2025.02.14 代码提交
This commit is contained in:
parent
86b12b8537
commit
4f178171c2
|
|
@ -6,8 +6,8 @@ const config = {
|
||||||
// host: 'h5api',
|
// host: 'h5api',
|
||||||
// #endif
|
// #endif
|
||||||
// #ifndef H5
|
// #ifndef H5
|
||||||
host: 'http://91f.xyz:8080',
|
// host: 'http://91f.xyz:8080',
|
||||||
// host: 'http://25f49356.r24.cpolar.top',
|
host: 'http://8vtja7.natappfree.cc',
|
||||||
// #endif
|
// #endif
|
||||||
// 支付方式配置
|
// 支付方式配置
|
||||||
payType: {
|
payType: {
|
||||||
|
|
|
||||||
|
|
@ -69,9 +69,10 @@
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
//
|
//
|
||||||
const emit = defineEmits(['showTime', 'showComment', 'showCollect', 'showFastCollect', 'showShareFirend', 'onPlay',
|
const emit = defineEmits(['showTime', 'showComment', 'showCollect', 'showFastCollect', 'showShareFirend', 'onPlay',
|
||||||
'onPause', 'like', 'detailMenu', 'onEnd', 'longtap', 'dataCenter'
|
'onPause', 'like', 'detailMenu', 'onEnd', 'longtap', 'dataCenter', 'showProduct'
|
||||||
])
|
])
|
||||||
|
|
||||||
// 视频上下文对象
|
// 视频上下文对象
|
||||||
|
|
@ -458,11 +459,17 @@
|
||||||
videoCtx.value.playbackRate(2)
|
videoCtx.value.playbackRate(2)
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
// 前往数据中心
|
||||||
function handleData() {
|
function handleData() {
|
||||||
emit('dataCenter', props.item)
|
emit('dataCenter', props.item)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 点击商品广告
|
||||||
|
function handleShowProduct() {
|
||||||
|
console.log('handleShowProduct')
|
||||||
|
emit('showProduct', props.item)
|
||||||
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
defineExpose({
|
defineExpose({
|
||||||
play,
|
play,
|
||||||
|
|
@ -620,7 +627,8 @@
|
||||||
<!-- 底部用户信息 -->
|
<!-- 底部用户信息 -->
|
||||||
<view class="panelBottom pa l0 r0 b0 pl40 pb30">
|
<view class="panelBottom pa l0 r0 b0 pl40 pb30">
|
||||||
<!-- 商品信息 -->
|
<!-- 商品信息 -->
|
||||||
<view class="goods df fdr mb20 br10" :class="{'active': showAd}" v-if="showAd">
|
<view class="goods df fdr mb20 br10" :class="{'active': showAd}" v-if="showAd"
|
||||||
|
@click.stop="handleShowProduct">
|
||||||
<!-- 商品图片 -->
|
<!-- 商品图片 -->
|
||||||
<image class="image wh100 mr15 br10" :src="item.productImage" mode="aspectFill" />
|
<image class="image wh100 mr15 br10" :src="item.productImage" mode="aspectFill" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
onMounted,
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
getCurrentInstance,
|
||||||
|
defineExpose,
|
||||||
|
computed,
|
||||||
|
onBeforeUnmount,
|
||||||
|
defineProps,
|
||||||
|
} from 'vue';
|
||||||
|
// 工具库
|
||||||
|
import util from '@/common/js/util.js'
|
||||||
|
// api
|
||||||
|
import api from '@/api/index.js'
|
||||||
|
// 产品详情
|
||||||
|
import proDetail from '@/components/shop/detail/detail'
|
||||||
|
//底部
|
||||||
|
import footerMenu from '@/components/shop/detail/footerMenu';
|
||||||
|
|
||||||
|
const {
|
||||||
|
proxy
|
||||||
|
} = getCurrentInstance()
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
//
|
||||||
|
})
|
||||||
|
// 商品id
|
||||||
|
const proId = ref('42')
|
||||||
|
// 详情
|
||||||
|
const detail = reactive({})
|
||||||
|
// 用户信息
|
||||||
|
const userinfo = computed(() => uni.$store.state.userinfo || {})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化
|
||||||
|
* @param {Object} productId 产品id
|
||||||
|
*/
|
||||||
|
function init(productId) {
|
||||||
|
if(productId) proId.value = productId
|
||||||
|
|
||||||
|
// 打开
|
||||||
|
open()
|
||||||
|
// 获取详情
|
||||||
|
getDetail()
|
||||||
|
// 添加商品浏览记录
|
||||||
|
addBrowsing()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取详情
|
||||||
|
function getDetail() {
|
||||||
|
api.shop.productDetail({
|
||||||
|
query: {
|
||||||
|
userId: userinfo.value.id,
|
||||||
|
// 产品id
|
||||||
|
productionId: proId.value
|
||||||
|
}
|
||||||
|
}).then(rs => {
|
||||||
|
if (rs.code == 200) {
|
||||||
|
Object.assign(detail, {}, rs.data)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
util.alert({
|
||||||
|
content: rs.msg,
|
||||||
|
showCancel: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加商品浏览记录
|
||||||
|
function addBrowsing() {
|
||||||
|
// 验证登录
|
||||||
|
util.isLogin(() => {
|
||||||
|
// 添加浏览记录
|
||||||
|
api.shop.addBrowsing({
|
||||||
|
data: {
|
||||||
|
userId: userinfo.value.id,
|
||||||
|
goodsId: proId.value
|
||||||
|
},
|
||||||
|
}).then(rs => {
|
||||||
|
if (rs.code != 200) console.log('addbrows err', rs.msg)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 详情
|
||||||
|
* @param {Object} ev 修改的详情
|
||||||
|
*/
|
||||||
|
function handleDetail(ev) {
|
||||||
|
Object.assign(detail, {}, ev)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开弹窗
|
||||||
|
function open() {
|
||||||
|
proxy.$refs.detailAlt.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭弹窗
|
||||||
|
function close() {
|
||||||
|
proxy.$refs.detailAlt.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
init,
|
||||||
|
open,
|
||||||
|
close,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<uni-popup ref="detailAlt" type="bottom">
|
||||||
|
<view class="container popBot">
|
||||||
|
<scroll-view class="scroll" :scroll-y="true">
|
||||||
|
<view class="main">
|
||||||
|
<!-- 获取详情 -->
|
||||||
|
<proDetail :id="proId" :detail="detail" />
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
|
<footerMenu :detail="detail" @update="handleDetail" />
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// 详情
|
||||||
|
.container {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
height: 1300rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -2,11 +2,604 @@
|
||||||
/**
|
/**
|
||||||
* 商品详情
|
* 商品详情
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
nextTick,
|
||||||
|
getCurrentInstance,
|
||||||
|
computed,
|
||||||
|
onMounted,
|
||||||
|
onUnmounted,
|
||||||
|
defineProps,
|
||||||
|
} from 'vue'
|
||||||
|
import {
|
||||||
|
useStore
|
||||||
|
} from 'vuex'
|
||||||
|
// 接口地址
|
||||||
|
import api from '@/api/index.js'
|
||||||
|
//
|
||||||
|
import util from '@/common/js/util.js'
|
||||||
|
|
||||||
|
// 传参
|
||||||
|
const props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const {
|
||||||
|
proxy
|
||||||
|
} = getCurrentInstance()
|
||||||
|
// 在这里设置swiper高度补足多端差异
|
||||||
|
const bannerHeight = ref('800rpx')
|
||||||
|
// 轮播图详情
|
||||||
|
const bannerIndex = ref(0)
|
||||||
|
// 商品评论
|
||||||
|
const comment = reactive({
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
})
|
||||||
|
// 最近购买订单列表
|
||||||
|
const recentOrderList = ref([])
|
||||||
|
//
|
||||||
|
const menuFn = {
|
||||||
|
// 店铺
|
||||||
|
store() {
|
||||||
|
link('/pages/shop/store/index')
|
||||||
|
},
|
||||||
|
// 客服
|
||||||
|
customerService() {
|
||||||
|
link('/pages/news/question-answer/index')
|
||||||
|
},
|
||||||
|
// 收藏
|
||||||
|
heibianStar() {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 已选择的规格下标
|
||||||
|
const spaceIndex = ref(0)
|
||||||
|
// 数量
|
||||||
|
const payNum = ref(1)
|
||||||
|
// 当前选择的规格
|
||||||
|
const currentSpec = computed(() => {
|
||||||
|
let spec = props.detail.specs || []
|
||||||
|
return spec[spaceIndex.value] || {}
|
||||||
|
})
|
||||||
|
// 应付总价
|
||||||
|
const total = computed(() => {
|
||||||
|
let price = parseFloat(props.detail.price) * 100
|
||||||
|
let result = parseInt(price * payNum.value) / 100
|
||||||
|
return result
|
||||||
|
})
|
||||||
|
// 详情
|
||||||
|
const banner = computed(() => {
|
||||||
|
let result = []
|
||||||
|
if (props.detail.sliderImage) result = props.detail.sliderImage.split(',')
|
||||||
|
return result
|
||||||
|
})
|
||||||
|
// 当前登录的用户信息
|
||||||
|
const userinfo = computed(() => {
|
||||||
|
return uni.$store.state.userinfo
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 获取商品评论
|
||||||
|
getProComment()
|
||||||
|
// 获取最近购买
|
||||||
|
getRecentOrder()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// 获取最近购买
|
||||||
|
function getRecentOrder() {
|
||||||
|
api.shop.recentOrder({
|
||||||
|
query: {
|
||||||
|
// 产品id
|
||||||
|
productId: props.id,
|
||||||
|
}
|
||||||
|
}).then(rs => {
|
||||||
|
if (rs.code == 200) {
|
||||||
|
// 结果
|
||||||
|
const result = rs.data
|
||||||
|
let list = []
|
||||||
|
//
|
||||||
|
for (let i = 0; i < result.length / 2; i++) {
|
||||||
|
if (!result[i * 2 + 1]) break
|
||||||
|
list.push([result[i * 2], result[i * 2 + 1]])
|
||||||
|
}
|
||||||
|
recentOrderList.value = list
|
||||||
|
return
|
||||||
|
}
|
||||||
|
util.alert({
|
||||||
|
content: rs.msg,
|
||||||
|
showCancel: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取商品评论
|
||||||
|
function getProComment() {
|
||||||
|
api.shop.getProComment({
|
||||||
|
query: {
|
||||||
|
// 产品id
|
||||||
|
productId: props.id,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 2,
|
||||||
|
}
|
||||||
|
}).then(rs => {
|
||||||
|
if (rs.code == 200) {
|
||||||
|
comment.list = rs.rows
|
||||||
|
comment.total = rs.total
|
||||||
|
return
|
||||||
|
}
|
||||||
|
util.alert({
|
||||||
|
content: rs.msg,
|
||||||
|
showCancel: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转路径
|
||||||
|
* @param {Object} url
|
||||||
|
*/
|
||||||
|
function link(url) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 收藏店铺
|
||||||
|
function handleCollectStore() {
|
||||||
|
api.shop.followShop({
|
||||||
|
data: {
|
||||||
|
shopId: props.detail.merId,
|
||||||
|
status: {
|
||||||
|
0: 1,
|
||||||
|
1: 0,
|
||||||
|
} [props.detail.isFollow]
|
||||||
|
}
|
||||||
|
}).then(rs => {
|
||||||
|
if (rs.code == 200) {
|
||||||
|
// 关注状态
|
||||||
|
props.detail.isFollow = {
|
||||||
|
0: 1,
|
||||||
|
1: 0,
|
||||||
|
} [props.detail.isFollow]
|
||||||
|
// 关注数量
|
||||||
|
props.detail.merFollowNumber = rs.data
|
||||||
|
return
|
||||||
|
}
|
||||||
|
util.alert({
|
||||||
|
content: rs.msg,
|
||||||
|
showCancel: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 商品收藏
|
||||||
|
function handleCollect() {
|
||||||
|
util.isLogin().then(rs => {
|
||||||
|
//
|
||||||
|
api.shop.addProductCollect({
|
||||||
|
data: {
|
||||||
|
productId: id.value,
|
||||||
|
status: {
|
||||||
|
0: 1,
|
||||||
|
1: 0,
|
||||||
|
} [props.detail.isCollect]
|
||||||
|
}
|
||||||
|
}).then(rs => {
|
||||||
|
if (rs.code == 200) {
|
||||||
|
// 关注状态
|
||||||
|
props.detail.isCollect = {
|
||||||
|
0: 1,
|
||||||
|
1: 0,
|
||||||
|
} [props.detail.isCollect]
|
||||||
|
// 关注数量
|
||||||
|
props.detail.collectNumber = rs.data
|
||||||
|
return
|
||||||
|
}
|
||||||
|
util.alert({
|
||||||
|
content: rs.msg,
|
||||||
|
showCancel: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
// 登录
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/login/loginPhone'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取店铺信息
|
||||||
|
function getShop() {
|
||||||
|
api.shop.shopDetail({
|
||||||
|
query: {
|
||||||
|
shopId: props.detail.merId
|
||||||
|
}
|
||||||
|
}).then(rs => {
|
||||||
|
if (rs.code == 200) {
|
||||||
|
Object.assign(props.detail, {}, rs.data)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
util.alert({
|
||||||
|
content: rs.msg,
|
||||||
|
showCancel: false,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 立即下单
|
||||||
|
*/
|
||||||
|
function handlePay(event) {
|
||||||
|
// 产生待付款订单
|
||||||
|
api.shop.addOrder({
|
||||||
|
data: [{
|
||||||
|
// 地址id
|
||||||
|
addressId: event.address.id,
|
||||||
|
// 产品id
|
||||||
|
productId: props.detail.id,
|
||||||
|
// 规格id
|
||||||
|
attrValueId: event.spec.id,
|
||||||
|
// 数量
|
||||||
|
payNum: event.payNum,
|
||||||
|
// 0-普通订单，1-视频号订单
|
||||||
|
orderType: 0,
|
||||||
|
// 分享人id
|
||||||
|
// shareId: userinfo.id,
|
||||||
|
}],
|
||||||
|
}).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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<view class="banner pr" v-if="detail.sliderImage">
|
||||||
|
<swiper class="swiper" :style="{height: bannerHeight,}" :current="bannerIndex"
|
||||||
|
@change="($event) => bannerIndex = $event.detail.current">
|
||||||
|
<swiper-item v-for="(item, index) in banner" :key="index">
|
||||||
|
<image class="poster" :src="item" mode="aspectFill" />
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<!-- 计数器 -->
|
||||||
|
<view class="count pa ptb5 plr20 bar">
|
||||||
|
<text class="text cfff f24">{{ bannerIndex + 1 }} / {{ banner.length }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品详情 -->
|
||||||
|
<view class="detail bfff ptb25 plr20">
|
||||||
|
<view class="line df fdr jcsb">
|
||||||
|
<view class="price df fdr aic">
|
||||||
|
<text class="txt">￥</text>
|
||||||
|
<text class="txt f56">{{detail.price}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 已售 -->
|
||||||
|
<view class="sold">
|
||||||
|
<text class="c999 f26">已售 {{detail.sales}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 优惠券 -->
|
||||||
|
<view class="coupon df fdr fww f26 mtb20 cFF9B27" v-if="0">
|
||||||
|
<view class="item">
|
||||||
|
<text>限时直降0.5元</text>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<text>平台立减1元</text>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<text>关注店铺1元优惠券</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品名称 -->
|
||||||
|
<view class="name mtb20 t2hd">
|
||||||
|
<text class="c333 f34">{{detail.name}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="history mtb20 df fdr jcsb aic">
|
||||||
|
<text class="c666 f28">商品修改历史</text>
|
||||||
|
<uni-icons type="right" color="#999" size="30rpx" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 福利政策 -->
|
||||||
|
<view class="gift df fdr fww mtb20">
|
||||||
|
<view class="item">
|
||||||
|
<text class="text">假一赔十</text>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<text class="text">7天无理由退货</text>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<text class="text">全场包邮</text>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<text class="text">48h内发货</text>
|
||||||
|
</view>
|
||||||
|
<view class="item" v-if="0">
|
||||||
|
<text class="text">支持先用后付</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 最近购买 -->
|
||||||
|
<view class="recently mtb20" v-if="recentOrderList[0]">
|
||||||
|
<swiper class="swiper" style="height: 220rpx;" :autoplay="true" vertical="true">
|
||||||
|
<swiper-item v-for="(item, index) in recentOrderList" :key="index">
|
||||||
|
<view class="list plr10 bfff">
|
||||||
|
<view class="item bsb df fdr jcsb aic plr10" v-for="(secItem, secIndex) in item"
|
||||||
|
:key="secIndex">
|
||||||
|
<view class="avatar">
|
||||||
|
<image class="avatar wh70 cir" :src="secItem.avatar" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="name f1 mlr10">
|
||||||
|
<text class="name c666 f28">{{secItem.nickname}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info mlr10 tar">
|
||||||
|
<!-- <view class="fn">刚刚下单</view> -->
|
||||||
|
<view class="time">
|
||||||
|
<text class="c999 f26">{{secItem.time}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn sm warm plr15">
|
||||||
|
<text class="cfff f26">立即购买</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品评价 -->
|
||||||
|
<view class="evaluate mtb20 plr25 bfff">
|
||||||
|
<view class="header df fdr jcsb aic ptb25"
|
||||||
|
@click="link(util.setUrl('/pages/shop/commodity/evaluate',{id: detail.id}))">
|
||||||
|
<text class="modelTitle">商品评价({{comment.total}})</text>
|
||||||
|
<uni-icons type="right" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 部分评论 -->
|
||||||
|
<view class="list">
|
||||||
|
<view class="item ptb20" v-for="(item, index) in comment.list" :key="index">
|
||||||
|
<view class="userinfo df fdr aic">
|
||||||
|
<image class="avatar wh45 cir" :src="item.avatar" mode="aspectFill" />
|
||||||
|
<view class="name thd f32 f1 ml20">
|
||||||
|
<text class="c666 f28">{{item.nickname}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content t2hd mt10">
|
||||||
|
<text class="c333 f28">{{item.content}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 店铺 -->
|
||||||
|
<view class="store df fdr aic jcsb mtb20 ptb20 plr25 bfff">
|
||||||
|
<view class="header df fdr jcsb aic">
|
||||||
|
<!-- 店铺头像 -->
|
||||||
|
<image class="wh140 br20" :src="detail.merAvatar" mode="aspectFill" />
|
||||||
|
<!-- 店铺信息 名称 评分 关注数量 -->
|
||||||
|
<view class="info f1 mlr20">
|
||||||
|
<!-- 店铺名称 -->
|
||||||
|
<view class="name thd">
|
||||||
|
<text class="f34 c333">{{detail.merName}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="line df fdr aic mt10">
|
||||||
|
<!-- 评分 -->
|
||||||
|
<!-- <view class="item f24 c666 df aic ">
|
||||||
|
<uni-rate class="mr10" :value="4.5" :size="12" activeColor="#FF9B27" readonly />
|
||||||
|
<text>4.5</text>
|
||||||
|
</view> -->
|
||||||
|
<!-- 关注数量 -->
|
||||||
|
<view class="item follow">
|
||||||
|
<text class=" c666 f24">{{detail.merFollowNumber}}关注</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 关注按钮 -->
|
||||||
|
<view @click="handleCollectStore" class="btn sm warm fmid fdr plr30">
|
||||||
|
<uni-icons class="mr10" color="#fff" type="plusempty" size="13" v-if="detail.isFollow != 1" />
|
||||||
|
<text class="cfff f28" v-else>已</text>
|
||||||
|
<text class="cfff f28">关注</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 宝贝详情 -->
|
||||||
|
<view class="p25 mtb240 bfff">
|
||||||
|
<view class="title">
|
||||||
|
<text class="modelTitle">宝贝详情</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品详情 -->
|
||||||
|
<view class="content mt30">
|
||||||
|
<rich-text :nodes="detail.infoRichText || ''" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 填充 -->
|
||||||
|
<view class="fill" style="height: 180rpx;"></view>
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
|
<view class="footerMneu pa rows plr20 shadow bfff">
|
||||||
|
<view class="menu df fdr jcsb aic">
|
||||||
|
<view class="option ver">
|
||||||
|
<image class="wh30" src="/static/store.png" mode="widthFix" />
|
||||||
|
<view class="f24 c999 mt10">店铺</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="option ver " @click="handleCollect">
|
||||||
|
<view class="wh30 fmid">
|
||||||
|
<uni-icons type="star-filled" size="45rpx" color="#FF9B27" v-if="detail.isCollect == 1" />
|
||||||
|
<uni-icons type="star" size="45rpx" color="#666" v-else />
|
||||||
|
</view>
|
||||||
|
<view class="f24 c999 mt10">
|
||||||
|
<text v-if="detail.isCollect == 1">已</text>
|
||||||
|
<text>收藏</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- <view class="option ver ">
|
||||||
|
<image class="wh30" src="/static/customer-service.png" mode="widthFix" />
|
||||||
|
<view class="f24 c999 mt10">客服</view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 下单 -->
|
||||||
|
<view class="btn lg primary f1 ml30" @click="$refs.makeOrderRef.open()">
|
||||||
|
<text>立即购买</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style lang="scss">
|
||||||
|
.container {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 轮播图
|
||||||
|
.banner {
|
||||||
|
.swiper {
|
||||||
|
|
||||||
|
.poster {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 800rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
bottom: 20rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模块标题
|
||||||
|
.modelTitle {
|
||||||
|
color: #333;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 详情
|
||||||
|
.detail {
|
||||||
|
.price .txt {
|
||||||
|
color: #FF7F37;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 优惠券
|
||||||
|
.coupon {
|
||||||
|
.item {
|
||||||
|
padding: 2rpx 10rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
border: 2rpx solid;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gift {
|
||||||
|
.item {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #999;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最近购买
|
||||||
|
.recently {
|
||||||
|
height: 220rpx;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
height: 110rpx;
|
||||||
|
|
||||||
|
&+.item {
|
||||||
|
border-top: 2rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info .fn {
|
||||||
|
color: #FF9B27;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 商品评价
|
||||||
|
.evaluate {
|
||||||
|
.header {
|
||||||
|
border-bottom: 2rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
.item+.item {
|
||||||
|
border-top: 2rpx solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 店铺
|
||||||
|
.store {
|
||||||
|
|
||||||
|
.info {
|
||||||
|
.item {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item+.item {
|
||||||
|
padding-left: 10rpx;
|
||||||
|
border-left: 2rpx solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部菜单
|
||||||
|
.footerMneu {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
// 选项
|
||||||
|
.option {
|
||||||
|
width: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
<script setup>
|
||||||
|
// 店铺 客服 收藏 支付
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
getCurrentInstance,
|
||||||
|
computed,
|
||||||
|
defineEmits,
|
||||||
|
onMounted
|
||||||
|
} from 'vue'
|
||||||
|
//
|
||||||
|
import util from '@/common/js/util.js'
|
||||||
|
//
|
||||||
|
import api from '@/api/index.js'
|
||||||
|
//
|
||||||
|
import {
|
||||||
|
useStore
|
||||||
|
} from 'vuex'
|
||||||
|
// 生成订单
|
||||||
|
import makeOrder from '@/components/shop/detail/makeOrder.vue'
|
||||||
|
|
||||||
|
const {
|
||||||
|
proxy
|
||||||
|
} = getCurrentInstance()
|
||||||
|
//
|
||||||
|
const store = useStore()
|
||||||
|
//
|
||||||
|
const props = defineProps({
|
||||||
|
// 商品信息
|
||||||
|
detail: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
//
|
||||||
|
const emit = defineEmits(['update'])
|
||||||
|
// 用户信息
|
||||||
|
const userinfo = computed(() => store.state.userinfo)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转
|
||||||
|
* @param {Object} url 跳转路径
|
||||||
|
*/
|
||||||
|
function link(url) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 立即支付 -->
|
||||||
|
<makeOrder ref="makeOrderRef" :detail="detail" @confirm="handlePay" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
|
|
@ -45,6 +45,8 @@
|
||||||
import fastCollect from '@/components/index/fastCollect.vue';
|
import fastCollect from '@/components/index/fastCollect.vue';
|
||||||
// 青少年模式
|
// 青少年模式
|
||||||
import teen from '@/components/index/teen.vue'
|
import teen from '@/components/index/teen.vue'
|
||||||
|
// 产品详情弹窗
|
||||||
|
import productAlt from '@/components/index/proDetailAlt.vue'
|
||||||
|
|
||||||
const {
|
const {
|
||||||
proxy
|
proxy
|
||||||
|
|
@ -208,6 +210,8 @@
|
||||||
viewSize.width = option.size.width
|
viewSize.width = option.size.width
|
||||||
})
|
})
|
||||||
}, 50)
|
}, 50)
|
||||||
|
//
|
||||||
|
proxy.$refs.productAltRef.init()
|
||||||
})
|
})
|
||||||
|
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
|
|
@ -273,6 +277,7 @@
|
||||||
// 获取推荐视频
|
// 获取推荐视频
|
||||||
function getRecList() {
|
function getRecList() {
|
||||||
console.log('getRecList')
|
console.log('getRecList')
|
||||||
|
return
|
||||||
// 获取首页分页视频
|
// 获取首页分页视频
|
||||||
api.video.homeVideo({
|
api.video.homeVideo({
|
||||||
query: {
|
query: {
|
||||||
|
|
@ -669,6 +674,15 @@
|
||||||
function showAlarm() {
|
function showAlarm() {
|
||||||
proxy.$refs.timeRef.open()
|
proxy.$refs.timeRef.open()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开产品弹窗
|
||||||
|
* @param {Object} item 视频列表项
|
||||||
|
*/
|
||||||
|
function handleShowProduct(item) {
|
||||||
|
// 打开产品详情弹窗
|
||||||
|
proxy.$refs.productAltRef.init(item.productId)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -731,7 +745,8 @@
|
||||||
@showTime="handleShowTime" @showComment="handleShowCommentAlt"
|
@showTime="handleShowTime" @showComment="handleShowCommentAlt"
|
||||||
@showCollect="handleShowCollectAlt" @showShareFirend="handleShowShareFirend"
|
@showCollect="handleShowCollectAlt" @showShareFirend="handleShowShareFirend"
|
||||||
@onPlay="handleVideoOnPlay" @onPause="handleVideoOnPause" @like="videoLike"
|
@onPlay="handleVideoOnPlay" @onPause="handleVideoOnPause" @like="videoLike"
|
||||||
@longtap="$refs.moreMenuRef.open(secItem)" @showFastCollect="handleShowFastCollect" />
|
@longtap="$refs.moreMenuRef.open(secItem)" @showFastCollect="handleShowFastCollect"
|
||||||
|
@showProduct="handleShowProduct" />
|
||||||
<!-- </template> -->
|
<!-- </template> -->
|
||||||
</cell>
|
</cell>
|
||||||
</list>
|
</list>
|
||||||
|
|
@ -763,6 +778,8 @@
|
||||||
<shareFirendAlt ref="shareFirendRef" />
|
<shareFirendAlt ref="shareFirendRef" />
|
||||||
<!-- 左侧菜单弹窗 -->
|
<!-- 左侧菜单弹窗 -->
|
||||||
<leftMenuAlt ref="leftMenuRef" />
|
<leftMenuAlt ref="leftMenuRef" />
|
||||||
|
<!-- 产品详情弹窗 -->
|
||||||
|
<productAlt ref="productAltRef" />
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -319,11 +319,16 @@
|
||||||
<image src="/static/commodity-release-video.png" mode="aspectFit" class="wh45" />
|
<image src="/static/commodity-release-video.png" mode="aspectFit" class="wh45" />
|
||||||
<view class="f1 ml20">添加链接到视频</view>
|
<view class="f1 ml20">添加链接到视频</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="rows mtb20">
|
<view class="rows mtb20">
|
||||||
<view class="mr10 f28">再第几秒展示</view>
|
<view class="mr10 f28">再第几秒展示</view>
|
||||||
<input type="text" placeholder="输入秒数" placeholder-class="placeholderStyle" />
|
<input type="text" placeholder="输入秒数" placeholder-class="placeholderStyle" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="main area editor" v-if="0">
|
||||||
|
<editor class="mtb30" placeholder="在此输入产品详情" />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="fill" style="height: 210rpx;"></view>
|
<view class="fill" style="height: 210rpx;"></view>
|
||||||
|
|
|
||||||
|
|
@ -1,195 +0,0 @@
|
||||||
<script setup>
|
|
||||||
// 店铺 客服 收藏 支付
|
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
reactive,
|
|
||||||
getCurrentInstance,
|
|
||||||
computed,
|
|
||||||
defineEmits,
|
|
||||||
onMounted
|
|
||||||
} from 'vue'
|
|
||||||
//
|
|
||||||
import util from '@/common/js/util.js'
|
|
||||||
//
|
|
||||||
import api from '@/api/index.js'
|
|
||||||
//
|
|
||||||
import {
|
|
||||||
useStore
|
|
||||||
} from 'vuex'
|
|
||||||
// 生成订单
|
|
||||||
import makeOrder from '@/components/shop/detail/makeOrder.vue'
|
|
||||||
|
|
||||||
const {
|
|
||||||
proxy
|
|
||||||
} = getCurrentInstance()
|
|
||||||
//
|
|
||||||
const store = useStore()
|
|
||||||
//
|
|
||||||
const props = defineProps({
|
|
||||||
// 商品信息
|
|
||||||
detail: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
},
|
|
||||||
})
|
|
||||||
//
|
|
||||||
const emit = defineEmits(['update'])
|
|
||||||
// 已选择的规格下标
|
|
||||||
const spaceIndex = ref(0)
|
|
||||||
// 数量
|
|
||||||
const payNum = ref(1)
|
|
||||||
// 当前选择的规格
|
|
||||||
const currentSpec = computed(() => {
|
|
||||||
let spec = props.detail.specs || []
|
|
||||||
return spec[spaceIndex.value] || {}
|
|
||||||
})
|
|
||||||
// 用户信息
|
|
||||||
const userinfo = computed(() => store.state.userinfo)
|
|
||||||
// 应付总价
|
|
||||||
const total = computed(() => {
|
|
||||||
let price = parseFloat(props.detail.price) * 100
|
|
||||||
let result = parseInt(price * payNum.value) / 100
|
|
||||||
return result
|
|
||||||
})
|
|
||||||
//
|
|
||||||
const menuFn = {
|
|
||||||
// 店铺
|
|
||||||
store() {
|
|
||||||
link('/pages/shop/store/index')
|
|
||||||
},
|
|
||||||
// 客服
|
|
||||||
customerService() {
|
|
||||||
link('/pages/news/question-answer/index')
|
|
||||||
},
|
|
||||||
// 收藏
|
|
||||||
heibianStar() {
|
|
||||||
//
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 跳转
|
|
||||||
* @param {Object} url 跳转路径
|
|
||||||
*/
|
|
||||||
function link(url) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 切换收藏
|
|
||||||
function handleCollect() {
|
|
||||||
//
|
|
||||||
api.shop.addProductCollect({
|
|
||||||
query: {
|
|
||||||
productId: props.detail.id,
|
|
||||||
type: {
|
|
||||||
0: 1,
|
|
||||||
1: 0,
|
|
||||||
} [props.detail.isCollect]
|
|
||||||
},
|
|
||||||
}).then(res => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
emit('update', {
|
|
||||||
...props.detail,
|
|
||||||
isCollect: {
|
|
||||||
0: 1,
|
|
||||||
1: 0,
|
|
||||||
} [props.detail.isCollect]
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
util.alert({
|
|
||||||
content: res.msg,
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 立即下单
|
|
||||||
*/
|
|
||||||
function handlePay(event) {
|
|
||||||
// 产生待付款订单
|
|
||||||
api.shop.addOrder({
|
|
||||||
data: [{
|
|
||||||
// 地址id
|
|
||||||
addressId: event.address.id,
|
|
||||||
// 产品id
|
|
||||||
productId: props.detail.id,
|
|
||||||
// 规格id
|
|
||||||
attrValueId: event.spec.id,
|
|
||||||
// 数量
|
|
||||||
payNum: event.payNum,
|
|
||||||
// 0-普通订单，1-视频号订单
|
|
||||||
orderType: 0,
|
|
||||||
// 分享人id
|
|
||||||
// shareId: userinfo.id,
|
|
||||||
}],
|
|
||||||
}).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="fill" style="height: 180rpx;"></view>
|
|
||||||
|
|
||||||
<!-- 底部 -->
|
|
||||||
<view class="footer footerMneu rows plr20 shadow bfff">
|
|
||||||
<view class="menu df fdr aic">
|
|
||||||
<view class="option ver">
|
|
||||||
<image class="wh30" src="/static/store.png" mode="widthFix" />
|
|
||||||
<view class="f24 c999 mt10">店铺</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="option ver " @click="handleCollect">
|
|
||||||
<view class="wh30 fmid">
|
|
||||||
<uni-icons type="star-filled" size="45rpx" color="#FF9B27" v-if="detail.isCollect == 1" />
|
|
||||||
<uni-icons type="star" size="45rpx" color="#666" v-else />
|
|
||||||
</view>
|
|
||||||
<view class="f24 c999 mt10">
|
|
||||||
<text v-if="detail.isCollect == 1">已</text>
|
|
||||||
<text>收藏</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- <view class="option ver ">
|
|
||||||
<image class="wh30" src="/static/customer-service.png" mode="widthFix" />
|
|
||||||
<view class="f24 c999 mt10">客服</view>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 下单 -->
|
|
||||||
<view class="btn lg primary f1 ml30" @click="$refs.makeOrderRef.open()">
|
|
||||||
<text>立即购买</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 立即支付 -->
|
|
||||||
<makeOrder ref="makeOrderRef" :detail="detail" @confirm="handlePay" />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
// 底部菜单
|
|
||||||
.menu {
|
|
||||||
|
|
||||||
// 选项
|
|
||||||
.option {
|
|
||||||
width: 80rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -24,31 +24,19 @@
|
||||||
import apex from './components/jy-commodity-head';
|
import apex from './components/jy-commodity-head';
|
||||||
// 商品列表
|
// 商品列表
|
||||||
import productList from '@/components/shop/productList/productList'
|
import productList from '@/components/shop/productList/productList'
|
||||||
|
// 产品详情
|
||||||
|
import proDetail from '@/components/shop/detail/detail'
|
||||||
//底部
|
//底部
|
||||||
import JyCommodityFoot from './components/jy-commodity-foot';
|
import footerMenu from '@/components/shop/detail/footerMenu';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
proxy
|
proxy
|
||||||
} = getCurrentInstance()
|
} = getCurrentInstance()
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
// 产品详情
|
|
||||||
const detail = reactive({})
|
|
||||||
// 产品id
|
// 产品id
|
||||||
const id = ref('')
|
const id = ref('')
|
||||||
// 轮播图详情
|
// 产品详情
|
||||||
const bannerIndex = ref(0)
|
const detail = reactive({})
|
||||||
// 商品评论
|
|
||||||
const comment = reactive({
|
|
||||||
list: [],
|
|
||||||
total: 0,
|
|
||||||
})
|
|
||||||
// 最近购买订单列表
|
|
||||||
const recentOrderList = ref([])
|
|
||||||
// 详情
|
|
||||||
const banner = computed(() => {
|
|
||||||
let result = []
|
|
||||||
if (detail.sliderImage) result = detail.sliderImage.split(',')
|
|
||||||
return result
|
|
||||||
})
|
|
||||||
// 当前登录的用户信息
|
// 当前登录的用户信息
|
||||||
const userinfo = computed(() => {
|
const userinfo = computed(() => {
|
||||||
return store.state.userinfo
|
return store.state.userinfo
|
||||||
|
|
@ -60,10 +48,6 @@
|
||||||
getDetail()
|
getDetail()
|
||||||
// 添加商品浏览记录
|
// 添加商品浏览记录
|
||||||
addBrowsing()
|
addBrowsing()
|
||||||
// 获取商品评论
|
|
||||||
getProComment()
|
|
||||||
// 获取最近购买
|
|
||||||
getRecentOrder()
|
|
||||||
// 开启监听
|
// 开启监听
|
||||||
addListener()
|
addListener()
|
||||||
})
|
})
|
||||||
|
|
@ -96,75 +80,6 @@
|
||||||
uni.$off('commodityDetail')
|
uni.$off('commodityDetail')
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取最近购买
|
|
||||||
function getRecentOrder() {
|
|
||||||
api.shop.recentOrder({
|
|
||||||
query: {
|
|
||||||
// 产品id
|
|
||||||
productId: id.value,
|
|
||||||
}
|
|
||||||
}).then(rs => {
|
|
||||||
if (rs.code == 200) {
|
|
||||||
// 结果
|
|
||||||
const result = rs.data
|
|
||||||
let list = []
|
|
||||||
//
|
|
||||||
for (let i = 0; i < result.length / 2; i++) {
|
|
||||||
if (!result[i * 2 + 1]) break
|
|
||||||
list.push([result[i * 2], result[i * 2 + 1]])
|
|
||||||
}
|
|
||||||
recentOrderList.value = list
|
|
||||||
return
|
|
||||||
}
|
|
||||||
util.alert({
|
|
||||||
content: rs.msg,
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取商品评论
|
|
||||||
function getProComment() {
|
|
||||||
api.shop.getProComment({
|
|
||||||
query: {
|
|
||||||
// 产品id
|
|
||||||
productId: id.value,
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 2,
|
|
||||||
}
|
|
||||||
}).then(rs => {
|
|
||||||
if (rs.code == 200) {
|
|
||||||
comment.list = rs.rows
|
|
||||||
comment.total = rs.total
|
|
||||||
return
|
|
||||||
}
|
|
||||||
util.alert({
|
|
||||||
content: rs.msg,
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加商品浏览记录
|
|
||||||
function addBrowsing() {
|
|
||||||
// 验证登录
|
|
||||||
util.isLogin(() => {
|
|
||||||
try {
|
|
||||||
// 添加浏览记录
|
|
||||||
api.shop.addBrowsing({
|
|
||||||
data: {
|
|
||||||
userId: userinfo.value.id,
|
|
||||||
goodsId: id.value
|
|
||||||
},
|
|
||||||
}).then(rs => {
|
|
||||||
if (rs.code != 200) console.log('addbrows err', rs.msg)
|
|
||||||
})
|
|
||||||
} catch (ev) {
|
|
||||||
console.log('addBrowsing', ev)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取详情
|
// 获取详情
|
||||||
function getDetail() {
|
function getDetail() {
|
||||||
api.shop.productDetail({
|
api.shop.productDetail({
|
||||||
|
|
@ -185,94 +100,18 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
// 添加商品浏览记录
|
||||||
* 跳转路径
|
function addBrowsing() {
|
||||||
* @param {Object} url
|
// 验证登录
|
||||||
*/
|
util.isLogin(() => {
|
||||||
function link(url) {
|
// 添加浏览记录
|
||||||
uni.navigateTo({
|
api.shop.addBrowsing({
|
||||||
url,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 收藏店铺
|
|
||||||
function handleCollectStore() {
|
|
||||||
api.shop.followShop({
|
|
||||||
data: {
|
data: {
|
||||||
shopId: detail.merId,
|
userId: userinfo.value.id,
|
||||||
status: {
|
goodsId: id.value
|
||||||
0: 1,
|
},
|
||||||
1: 0,
|
|
||||||
} [detail.isFollow]
|
|
||||||
}
|
|
||||||
}).then(rs => {
|
}).then(rs => {
|
||||||
if (rs.code == 200) {
|
if (rs.code != 200) console.log('addbrows err', rs.msg)
|
||||||
// 关注状态
|
|
||||||
detail.isFollow = {
|
|
||||||
0: 1,
|
|
||||||
1: 0,
|
|
||||||
} [detail.isFollow]
|
|
||||||
// 关注数量
|
|
||||||
detail.merFollowNumber = rs.data
|
|
||||||
return
|
|
||||||
}
|
|
||||||
util.alert({
|
|
||||||
content: rs.msg,
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 商品收藏
|
|
||||||
function handleCollect() {
|
|
||||||
util.isLogin().then(rs => {
|
|
||||||
//
|
|
||||||
api.shop.addProductCollect({
|
|
||||||
data: {
|
|
||||||
productId: id.value,
|
|
||||||
status: {
|
|
||||||
0: 1,
|
|
||||||
1: 0,
|
|
||||||
} [detail.isCollect]
|
|
||||||
}
|
|
||||||
}).then(rs => {
|
|
||||||
if (rs.code == 200) {
|
|
||||||
// 关注状态
|
|
||||||
detail.isCollect = {
|
|
||||||
0: 1,
|
|
||||||
1: 0,
|
|
||||||
} [detail.isCollect]
|
|
||||||
// 关注数量
|
|
||||||
detail.collectNumber = rs.data
|
|
||||||
return
|
|
||||||
}
|
|
||||||
util.alert({
|
|
||||||
content: rs.msg,
|
|
||||||
showCancel: false,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
// 登录
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/login/loginPhone'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取店铺信息
|
|
||||||
function getShop() {
|
|
||||||
api.shop.shopDetail({
|
|
||||||
query: {
|
|
||||||
shopId: detail.merId
|
|
||||||
}
|
|
||||||
}).then(rs => {
|
|
||||||
if (rs.code == 200) {
|
|
||||||
Object.assign(detail, {}, rs.data)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
util.alert({
|
|
||||||
content: rs.msg,
|
|
||||||
showCancel: false,
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -289,160 +128,10 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="app pr">
|
<view class="app pr">
|
||||||
<!-- 头部 -->
|
<!-- 头部 -->
|
||||||
<apex ref="apexRef" :detail="detail"></apex>
|
<apex ref="apexRef" :detail="detail" />
|
||||||
|
|
||||||
<!-- 轮播图 -->
|
<!-- 获取详情 -->
|
||||||
<view class="banner pr" v-if="detail.sliderImage">
|
<proDetail :id="id" :detail="detail" />
|
||||||
<swiper class="swiper" :current="bannerIndex" @change="($event) => bannerIndex = $event.detail.current">
|
|
||||||
<swiper-item v-for="(item, index) in banner" :key="index">
|
|
||||||
<image class="poster" :src="item" mode="aspectFill" />
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
|
|
||||||
<!-- 计数器 -->
|
|
||||||
<view class="text pa ptb5 plr20 cfff f24 bar">{{ bannerIndex + 1 }} / {{ banner.length }}</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 商品详情 -->
|
|
||||||
<view class="detail bfff ptb25 plr20">
|
|
||||||
<view class="line rows">
|
|
||||||
<view class="price">
|
|
||||||
<text class="txt">￥</text>
|
|
||||||
<text class="txt f56">{{detail.price}}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 已售 -->
|
|
||||||
<view class="sold">
|
|
||||||
<text class="c999 f26">已售 {{detail.sales}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 优惠券 -->
|
|
||||||
<view class="coupon df fdr fww f26 mtb20 cFF9B27" v-if="0">
|
|
||||||
<view class="item">
|
|
||||||
<text>限时直降0.5元</text>
|
|
||||||
</view>
|
|
||||||
<view class="item">
|
|
||||||
<text>平台立减1元</text>
|
|
||||||
</view>
|
|
||||||
<view class="item">
|
|
||||||
<text>关注店铺1元优惠券</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 商品名称 -->
|
|
||||||
<view class="name mtb20 f34 c333 t2hd">{{detail.name}}</view>
|
|
||||||
|
|
||||||
<view class="history mtb20 rows">
|
|
||||||
<view class="c666 f28">商品修改历史</view>
|
|
||||||
<uni-icons type="right" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 福利政策 -->
|
|
||||||
<view class="gift df fdr fww c999 f24 mtb20">
|
|
||||||
<view class="item">
|
|
||||||
<text>假一赔十</text>
|
|
||||||
</view>
|
|
||||||
<view class="item">
|
|
||||||
<text>7天无理由退货</text>
|
|
||||||
</view>
|
|
||||||
<view class="item">
|
|
||||||
<text>全场包邮</text>
|
|
||||||
</view>
|
|
||||||
<view class="item">
|
|
||||||
<text>48h内发货</text>
|
|
||||||
</view>
|
|
||||||
<view class="item" v-if="0">
|
|
||||||
<text>支持先用后付</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 最近购买 -->
|
|
||||||
<view class="recently mtb20" v-if="recentOrderList[0]">
|
|
||||||
<swiper class="swiper" :autoplay="true" vertical="true">
|
|
||||||
<swiper-item v-for="(item, index) in recentOrderList" :key="index">
|
|
||||||
<view class="list plr10 bfff">
|
|
||||||
<view class="item bsb rows plr10" v-for="(secItem, secIndex) in item" :key="secIndex">
|
|
||||||
<view class="avatar">
|
|
||||||
<image class="avatar wh70 cir" :src="secItem.avatar" mode="aspectFill" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="name f1 mlr10 f28">{{secItem.nickname}}</view>
|
|
||||||
<view class="info mlr10 f26 tar">
|
|
||||||
<!-- <view class="fn">刚刚下单</view> -->
|
|
||||||
<view class="time c999">{{secItem.time}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="btn sm warm plr15">立即购买</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 商品评价 -->
|
|
||||||
<view class="evaluate mtb20 plr25 bfff">
|
|
||||||
<view class="header rows ptb25"
|
|
||||||
@click="link(util.setUrl('/pages/shop/commodity/evaluate',{id: detail.id}))">
|
|
||||||
<text class="modelTitle">商品评价({{comment.total}})</text>
|
|
||||||
<uni-icons type="right" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 部分评论 -->
|
|
||||||
<view class="list">
|
|
||||||
<view class="item ptb20" v-for="(item, index) in comment.list" :key="index">
|
|
||||||
<view class="userinfo df c666 f28">
|
|
||||||
<image class="avatar wh45 cir" :src="item.avatar" mode="aspectFill" />
|
|
||||||
<view class="name thd f32 f1 ml20">{{item.nickname}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="content t2hd mt10 c333 f28">{{item.content}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 店铺 -->
|
|
||||||
<view class="store df aic jcsb mtb20 ptb20 plr25 bfff">
|
|
||||||
<view class="header rows">
|
|
||||||
<!-- 店铺头像 -->
|
|
||||||
<image class="wh140 br20" :src="detail.merAvatar" mode="aspectFill" />
|
|
||||||
<!-- 店铺信息 名称 评分 关注数量 -->
|
|
||||||
<view class="info f1 mlr20">
|
|
||||||
<!-- 店铺名称 -->
|
|
||||||
<view class="name thd">
|
|
||||||
<text class="f34 c333">{{detail.merName}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="line df dfr aic mt10">
|
|
||||||
<!-- 评分 -->
|
|
||||||
<!-- <view class="item f24 c666 df aic ">
|
|
||||||
<uni-rate class="mr10" :value="4.5" :size="12" activeColor="#FF9B27" readonly />
|
|
||||||
<text>4.5</text>
|
|
||||||
</view> -->
|
|
||||||
<!-- 关注数量 -->
|
|
||||||
<view class="item follow c666 f24">
|
|
||||||
<text>{{detail.merFollowNumber}}关注</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 关注按钮 -->
|
|
||||||
<view @click="handleCollectStore" class="btn sm warm plr30">
|
|
||||||
<uni-icons class="mr10" color="#fff" type="plusempty" size="13" v-if="detail.isFollow != 1" />
|
|
||||||
<text class="cfff" v-else>已</text>
|
|
||||||
<text class="cfff">关注</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 宝贝详情 -->
|
|
||||||
<view class="p25 mtb240 bfff">
|
|
||||||
<view class="title">
|
|
||||||
<text class="modelTitle">宝贝详情</text>
|
|
||||||
</view>
|
|
||||||
<!-- 商品详情 -->
|
|
||||||
<view class="content mt30">
|
|
||||||
<rich-text :nodes="detail.intro" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 精选 -->
|
<!-- 精选 -->
|
||||||
<view class="recommend mlr20">
|
<view class="recommend mlr20">
|
||||||
|
|
@ -450,136 +139,10 @@
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<JyCommodityFoot :detail="detail" @update="handleDetail" />
|
<footerMenu :detail="detail" @update="handleDetail" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
// 补齐轮播图高度
|
//
|
||||||
.swiper {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 轮播图
|
|
||||||
.banner {
|
|
||||||
|
|
||||||
.swiper {
|
|
||||||
height: 800rpx;
|
|
||||||
|
|
||||||
.poster {
|
|
||||||
width: 750rpx;
|
|
||||||
height: 800rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
bottom: 20rpx;
|
|
||||||
right: 20rpx;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #000a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 模块标题
|
|
||||||
.modelTitle {
|
|
||||||
color: #333;
|
|
||||||
font-size: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 详情
|
|
||||||
.detail {
|
|
||||||
.price .txt {
|
|
||||||
color: #FF7F37;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 优惠券
|
|
||||||
.coupon {
|
|
||||||
.item {
|
|
||||||
padding: 2rpx 10rpx;
|
|
||||||
margin-right: 15rpx;
|
|
||||||
margin-bottom: 15rpx;
|
|
||||||
border: 2rpx solid;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gift {
|
|
||||||
.item {
|
|
||||||
margin-right: 20rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 最近购买
|
|
||||||
.recently {
|
|
||||||
height: 220rpx;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
height: 110rpx;
|
|
||||||
|
|
||||||
&+.item {
|
|
||||||
border-top: 2rpx solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info .fn {
|
|
||||||
color: #FF9B27;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 商品评价
|
|
||||||
.evaluate {
|
|
||||||
.header {
|
|
||||||
border-bottom: 2rpx solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
.item+.item {
|
|
||||||
border-top: 2rpx solid #eee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-popup {
|
|
||||||
border-radius: 20px 20px 0px 0px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 28rpx 0 14rpx 0;
|
|
||||||
font-size: $uni-font-size-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
position: absolute;
|
|
||||||
right: 20rpx;
|
|
||||||
top: 30rpx;
|
|
||||||
display: inline-block;
|
|
||||||
width: 50rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
//滚动
|
|
||||||
.jy-comment-list-content {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 店铺
|
|
||||||
.store {
|
|
||||||
|
|
||||||
.info {
|
|
||||||
.item {
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item+.item {
|
|
||||||
padding-left: 10rpx;
|
|
||||||
border-left: 2rpx solid #eee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -3,9 +3,8 @@ import {
|
||||||
} from 'vite';
|
} from 'vite';
|
||||||
import uni from '@dcloudio/vite-plugin-uni';
|
import uni from '@dcloudio/vite-plugin-uni';
|
||||||
|
|
||||||
let target = 'http://91f.xyz:8080'
|
// let target = 'http://91f.xyz:8080'
|
||||||
// let target = 'http://25f49356.r24.cpolar.top'
|
let target = 'http://8vtja7.natappfree.cc'
|
||||||
// let target = 'http://25f49356.r24.cpolar.top'
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [uni()],
|
plugins: [uni()],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue