zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0919

Browse Source
This commit is contained in:
@fawn-nine
2023-09-19 12:01:14 +08:00
parent ef54443c1a
commit 8787e14e68
1 changed files with 232 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
pages/bookShop/commodityDetail.vue
View File

@@ -13,34 +13,39 @@
</swiper>
</view>
<view class="commodityContent">
<view class="commodityPrice">
<span style="font-size: 28rpx;">￥</span><em>{{productInfo.price}}</em>
<span class="oldPrice " v-if="productInfo.activityPrice">原价<span style="font-size: 20rpx;padding-left:10rpx;">￥</span>{{productInfo.activityPrice}}</span>
<view class="commodityPrice" v-if="productInfo.activityPrice && productInfo.activityPrice > 0">
<span style="font-size: 28rpx;" >￥</span><em>{{productInfo.activityPrice}}</em>
<span class="oldPrice " >原价<span style="font-size: 20rpx;padding-left:10rpx;">￥</span>{{productInfo.price}}</span>
</view>
<view class="commodityPrice" v-else>
<span style="font-size: 28rpx;" >￥</span><em>{{productInfo.price}}</em>
</view>
<view class="commodityyName">
{{productInfo.productName}}
<span v-if="productInfo.productStock==0" style="color: #aaa;font-size:26rpx;">（无货）</span>
<view><text class="SoldNumber">已售<span style="padding-left:10rpx;">{{productInfo.sumSales}}</span>件</text></view>
</view>
<view class="pingjia" v-if="listenList && listenList.length > 0 && listenList[0]">
<view class="pingjia" v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">
<view class="">
<view style="font-weight: 600;margin-bottom: 30rpx;">商品包含</view>
<view style="font-weight: 600;margin-bottom: 30rpx;">其他购买套餐</view>
<!-- <view class="icon-del rotate"></view> -->
</view>
<!-- 商品包含 -->
<view v-if="listenList && listenList.length > 0 && listenList[0]">
<view class="spbh" v-for="item in listenList" :key="item.id">
<view class="flexbox aligncenter" @click="previewImage(item.images)">
<view v-if="linkProducts && linkProducts.length > 0 && linkProducts[0]">
<view class="spbh" v-for="(item, index) in linkProducts" :key="item.id">
<view class="flexbox aligncenter" @click="previewProduct(item,index)">
<view class="spbhimg">
<image :src="item.images" mode="aspectFit"></image>
<image :src="item.productImages" mode="aspectFit"></image>
</view>
<text class="username nowrap ">{{item.name}}</text>
<text class="username nowrap ">{{item.productName}}</text>
<text class="price" v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</text>
<text class="price" v-else>￥{{item.price}}</text>
</view>
</view>
</view>
<view class="quesheng" v-else>
<text>暂无评价~</text>
</view>
</view>
<!-- <view class="quesheng" v-else>
<text>暂无关联商品~</text>
</view> -->
</view>
<view class="contentButton">
@@ -155,6 +160,34 @@
</view>
<view style="height: 120rpx;"></view>
</view>
<view class="" v-if="upoShow">
<u-popup :show="upoShow" :round="10" @close="closeUpo">
<view class="tanchu">
<view class="list">
<view class="imgBox">
<image v-if="linkimg == ''" src="../../static/icon/wufeng.jpg" mode="aspectFit" style="width: 100%; height: 100%;"></image>
<image v-else :src="linkimg" mode="aspectFit" style="width: 100%; height: 100%;"></image>
<view class="xiangxi" v-if="productId != linkProducts[linkCur].productId" @click="gotoDetail(linkProducts[linkCur])">
<text>查看详情</text>
</view>
</view>
<view :class="['spbh', linkCur == index ? 'cur' :'']" v-for="(item, index) in linkProducts" :key="item.id">
<view class="flexbox aligncenter" @click="previewProduct(item,index)">
<view class="spbhimg">
<image :src="item.productImages" mode="aspectFit"></image>
</view>
<text class="username nowrap ">{{item.productName}}</text>
<text class="price" v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice}}</text>
<text class="price" v-else>￥{{item.price}}</text>
</view>
</view>
</view>
<uni-goods-nav style="left: 0;" class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
@buttonClick="buttonClickLink" />
</view>
</u-popup>
</view>
<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
<music-play :playData="playData"></music-play>
@@ -172,6 +205,7 @@
export default {
data() {
return {
linkimg:'', // 选中的关联商品图片
playData:{},
contentShow:0,
options: [{
@@ -204,13 +238,17 @@
cartList: [], // 购物车列表
commentsList:[], // 评论列表
productId:null, // 商品评论
listenList:[] // 关联得听书
listenList:[], // 关联得听书
linkProducts:[], // 关联的商品,
upoShow:false, // 显示底部购买选项
linkCur : 0, // 当前选中的关联项
}
},
onLoad(e) {
this.productId = e.id
this.getProDetail(e)
this.getComments()
this.getLinkPros(this.productId)
// console.log(emojiList1,'emojiList1')
},
computed: {
@@ -220,6 +258,41 @@
musicPlay
},
methods: {
gotoDetail(item){
console.log(item,'gotoDetail')
uni.navigateTo({
url: '../bookShop/commodityDetail?id=' + item.productId
});
},
closeUpo(){
console.log('关闭弹窗')
this.upoShow = false
},
// 点击其他套餐
previewProduct(item,index){
console.log(item,'item')
this.linkimg = item.productImages
this.upoShow = true
this.linkCur = index
},
// 获取商品关联商品
getLinkPros(id){
this.$http
.post('book/shopproduct/bookinfolists/'+id)
.then(res => {
console.log('关联商品', res)
if(res.code == 0){
this.linkProducts = res.result
if(this.linkProducts.length > 0){
this.linkimg = this.linkProducts[0].productImages
this.linkCur = 0
}
}
})
.catch(e => {
console.log(e,'e')
})
},
goToListen(id){
// 跳转到听书
uni.navigateTo({
@@ -331,15 +404,50 @@
url: '../peanut/shopping'
});
},
// 关联商品点击按钮组件
buttonClickLink(e){
console.log('点击的是关联商品的组件')
if(e.index == 0){
// 点击的是加入购物车
if (this.linkProducts[this.linkCur].productStock == 0) {
uni.showToast({
title: '商品库存不足',
icon: "none",
duration: 1000,
});
} else {
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
this.cartList = res.cartList
this.isAddLink(this.linkProducts[this.linkCur])
})
}
}else{
// 点击的是立即购买
if (this.linkProducts[this.linkCur].productStock == 0) {
uni.showToast({
title: '商品库存不足',
icon: "none",
duration: 1000,
});
} else {
uni.navigateTo({
url: '../bookShop/settlement?type=2&list=' + this.linkProducts[this.linkCur].productId
});
}
}
},
// 点击按钮组间
buttonClick(e) {
console.log(e)
if(e.index == 0){
// 点击的是加入购物车
// 点击的是加入购物车
this.addCart()
}else{
// 点击的是立即购买
this.goPurse()
this.upoShow = true
// this.goPurse()
}
},
goToListenNone(){
@@ -366,6 +474,83 @@
}
},
isAddLink(item) {
// 统计商品信息
let data = {
"userId": this.userInfo.id,
"productId": item.productId,
"productAmount": this.productAmount,
"price": item.price
}
// 判断列表是否为空
if (this.cartList.length > 0) {
let flag = ''
let shagnpin = {}
// 循环购物车列表
flag = this.cartList.some((item, index) => {
if (item.productId == data.productId) {
shagnpin = item
shagnpin.productAmount = item.productAmount + 1
return true
}
})
if (flag) {
// 已在购物车中添加
$http.request({
url: "book/ordercart/update",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: shagnpin,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
this.upoShow = false
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
} else {
// 加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
this.upoShow = false
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
}
} else {
// 购物车列表为空时直接加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
}
},
isAdd() {
// 统计商品信息
let data = {
@@ -517,6 +702,30 @@ formatRichText (html) { //控制小程序中图片大小
}
</script>
<style lang="scss" scoped>
.tanchu { background: #fff;position: relative;
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
.list{margin-bottom: 140rpx;
.imgBox{height: 500rpx; width: 100%; margin-bottom: 10rpx; position: relative;
.xiangxi{text-align: center; position: absolute; left: 0; bottom: 20rpx; width: 100%;
text{padding: 10rpx 20rpx; font-size: 32rpx; background-color: rgba(235, 160, 11, .9); color: #def0ea; border-radius: 10px;}
}
}
}
.spbh{ border: 2rpx solid #fff;
.spbhimg {
image{
border: none !important;
}
}
}
.spbh.cur{
border: 2rpx solid #eba00b;
border-radius: 10rpx;
overflow: hidden;
}
}
.tingshuList{margin-top: 20rpx; background-color: #fff; padding: 20rpx;
border-radius: 20rpx; margin-bottom: 20rpx; padding-top: 40rpx;
background-image: linear-gradient(0deg, #f7fffc 0%, #def0ea 100%);
@@ -554,7 +763,7 @@ formatRichText (html) { //控制小程序中图片大小
}
.spbh{
padding-bottom: 10rpx;
font-size: 26rpx;
font-size: 26rpx; padding: 0 10rpx;
}
.spbhimg{
width:40px; overflow: hidden; text-align: center;
@@ -566,8 +775,12 @@ formatRichText (html) { //控制小程序中图片大小
border-radius: 6rpx;
overflow: hidden;
}
.username{font-size: 24rpx; color: #999; margin-top: 6rpx; }
}
.username{ margin-left: 10rpx; }
.price{margin-left: 5px;
color: #ffa200;
font-weight: bold;}
.nowrap {
white-space: nowrap;
overflow-x: hidden;