You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
623 lines
15 KiB
623 lines
15 KiB
<template>
|
|
<view class="warpper">
|
|
<view class="swiper-dot">
|
|
<uni-swiper-dot :info="info.imgList" :current="current" field="content" mode="indexes" style="height: 100%;">
|
|
<swiper class="swiper-box" @change="swiperChange" style="height: 100%;">
|
|
<swiper-item v-for="(item, index) in info.imgList" :key="index">
|
|
<view class="" @tap="previewImg(item, info.imgList)">
|
|
<image class="image" :src="item || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'" mode=""></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</uni-swiper-dot>
|
|
</view>
|
|
<uGap></uGap>
|
|
<view class="info-box">
|
|
<view class="info">
|
|
<view class="price-row">
|
|
<text class="price">¥{{ info.skuList[0].listPrice }}</text>
|
|
<text class="unit">/{{ info.skuList[0].stockUnit }}</text>
|
|
</view>
|
|
<view class="row">
|
|
<view class="name">{{ info.name }}</view>
|
|
<view class="value">库存：{{ info.skuList[0].stock || XX }}{{ info.skuList[0].stockUnit }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="label">克重：</view>
|
|
<view class="tag-box" v-for="(titem, tindex) in info.skuList" :key="tindex">
|
|
<text>{{ titem.weight }}g</text>
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="label" style="font-size: 24rpx;">规格：</view>
|
|
<view class="tag-box"><text>787*1092</text></view>
|
|
<view class="tag-box"><text>899*1194</text></view>
|
|
</view>
|
|
</view>
|
|
<uGap></uGap>
|
|
<view class="other">
|
|
<view class="title">商品卖点</view>
|
|
<view class="desc">{{ info.sellingProposition }}</view>
|
|
</view>
|
|
<view class="other">
|
|
<view class="title">商品描述</view>
|
|
<view class="desc">{{ info.description }}</view>
|
|
</view>
|
|
<view class="other">
|
|
<view class="title">送货说明</view>
|
|
<view class="desc">{{ info.shippingNote }}</view>
|
|
</view>
|
|
<view class="other" style="border: none;">
|
|
<view class="title">其他说明</view>
|
|
<view class="desc">{{ info.otherNote }}</view>
|
|
</view>
|
|
<qn-footer fixed height="100rpx">
|
|
<view class="footer-row">
|
|
<view class="left">
|
|
<view class="">
|
|
<image class="icon" src="/static/imgs/paperDetails/shop-icon.png"></image>
|
|
<view class="label" @tap="storeTap">店铺</view>
|
|
</view>
|
|
<view class="">
|
|
<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image>
|
|
<view class="label" @tap="shoppingCartTap">购物车</view>
|
|
</view>
|
|
<view class="" @tap="addShoppingTap(1)">
|
|
<image class="icon" src="/static/imgs/paperDetails/add-shopping-trolley.png"></image>
|
|
<view class="label">加购物车</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="inquiry-btn" @tap="inquiryTap">立即询单</view>
|
|
<view class="book-btn" @tap="addShoppingTap(2)">立即订购</view>
|
|
</view>
|
|
</view>
|
|
</qn-footer>
|
|
<uni-popup ref="popup" type="bottom">
|
|
<view class="popup_modal">
|
|
<!-- <slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot> -->
|
|
<view class="card-box">
|
|
<view class="box">
|
|
<!-- <image class="image" :src="info.imgList[0] || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif'" mode=""></image> -->
|
|
<view class="right-box">
|
|
<view class="title-row">
|
|
<view class="name">{{ info.name }}</view>
|
|
<view class="close-icon" @tap="closeTap"><uni-icons size="20" type="close" color="#888888"></uni-icons></view>
|
|
</view>
|
|
<view class="price">¥{{ buyPaperDto.unitPrice }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="choose-box">
|
|
<view class="label">请选择克重</view>
|
|
<view class="tag-row">
|
|
<view :class="['tag-box', kgActive === kIndex ? 'kg-select' : '']" v-for="(kItem, kIndex) in info.skuList" :key="kIndex" @tap="weightTap(kItem, kIndex)">
|
|
{{ kItem.weight }}g
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="choose-box">
|
|
<view class="label">请选择规格</view>
|
|
<view class="tag-row">
|
|
<view
|
|
:class="['tag-box', specificationObj.active === sIndex ? 'kg-select' : '']"
|
|
v-for="(sItem, sIndex) in specificationList"
|
|
:key="sIndex"
|
|
@tap="specificationTap(sItem, sIndex)"
|
|
>
|
|
{{ sItem.name }}
|
|
</view>
|
|
</view>
|
|
<view class="input-row">
|
|
<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="buyPaperDto.width" placeholder="请输入"></uni-easyinput></view>
|
|
<view class="symbol">x</view>
|
|
<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="buyPaperDto.length" placeholder="请输入"></uni-easyinput></view>
|
|
</view>
|
|
</view>
|
|
<view class="quantity-row">
|
|
<view class="label">购买数量(张)</view>
|
|
<view class=""><qnInputNumber @change="change" /></view>
|
|
</view>
|
|
<view class="ygzl-text">预估重量：{{ buyTon }}吨</view>
|
|
<view class="popup-footer-row"><view class="btn" @tap="confirm">确认</view></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uGap from '@/components/u-gap/u-gap.vue'
|
|
import qnFooter from '@/components/qn-footer/qn-footer.vue'
|
|
import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue'
|
|
import { go2 } from '@/utils/hook.js'
|
|
import { getPaperDetail, createGoodsReserve, createShoppingCar } from '@/apis/paperDetailsApi.js'
|
|
export default {
|
|
components: { uGap, qnFooter, qnInputNumber },
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
weightList: ['240', '250', '280'],
|
|
specificationList: [
|
|
{
|
|
name: '正度',
|
|
width: '787',
|
|
length: '1092',
|
|
disabled: true
|
|
},
|
|
{
|
|
name: '特规分切',
|
|
width: '889',
|
|
length: '1194',
|
|
disabled: true
|
|
},
|
|
{
|
|
name: '特规分切',
|
|
width: '',
|
|
length: '',
|
|
disabled: false
|
|
}
|
|
],
|
|
kgActive: 0,
|
|
specificationObj: {
|
|
active: 0,
|
|
width: '787',
|
|
length: '1092',
|
|
disabled: true
|
|
},
|
|
value: null,
|
|
params: {
|
|
productId: ''
|
|
},
|
|
buyPaperDto: {
|
|
buyTon: '',
|
|
gramWeight: '',
|
|
length: '',
|
|
mallSupplierId: '',
|
|
pieceQuantity: '',
|
|
productId: '',
|
|
productSkuId: '',
|
|
unitPrice: '',
|
|
width: '',
|
|
img: '',
|
|
listPrice: '',
|
|
name: ''
|
|
},
|
|
shoppingCarType: 1, // 1：加购物车 2：订购
|
|
info: {},
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.params.productId = option.id
|
|
this.queryData()
|
|
},
|
|
computed: {
|
|
buyTon() {
|
|
let num = 0
|
|
num = Number(this.buyPaperDto.gramWeight) * Number(this.buyPaperDto.pieceQuantity)
|
|
|
|
this.buyPaperDto.buyTon = num / (1000 * 1000)
|
|
return this.buyPaperDto.buyTon
|
|
}
|
|
},
|
|
methods: {
|
|
// 查询店铺纸品详情
|
|
queryData() {
|
|
getPaperDetail(this.params).then(res => {
|
|
console.log('店铺纸品详情', res)
|
|
if (res) {
|
|
this.info = res
|
|
}
|
|
})
|
|
},
|
|
// 点击店铺
|
|
storeTap() {
|
|
go2('store')
|
|
},
|
|
// 点击购物车
|
|
shoppingCartTap() {
|
|
go2('cart')
|
|
},
|
|
// 立即订购
|
|
addShoppingTap(type) {
|
|
this.shoppingCarType = type
|
|
this.buyPaperDto = {
|
|
buyTon: 0,
|
|
gramWeight: this.info.skuList[0].weight,
|
|
length: this.specificationObj.length,
|
|
mallSupplierId: this.info.supplierId,
|
|
pieceQuantity: 0,
|
|
productId: this.info.id,
|
|
productSkuId: this.info.skuList[0].id,
|
|
unitPrice: this.info.skuList[0].listPrice,
|
|
width: this.specificationObj.width
|
|
}
|
|
this.$refs.popup.open('bottom')
|
|
},
|
|
|
|
// 路由到实单询比价
|
|
inquiryTap() {
|
|
go2('for-comparison', { id: null })
|
|
},
|
|
closeTap() {
|
|
this.$refs.popup.close()
|
|
},
|
|
// 重量切换
|
|
weightTap(item, index) {
|
|
this.kgActive = index
|
|
this.buyPaperDto.gramWeight = item.weight
|
|
},
|
|
// 规格切换
|
|
specificationTap(item, index) {
|
|
this.specificationObj.active = index
|
|
this.specificationObj.width = item.width
|
|
this.specificationObj.length = item.length
|
|
this.specificationObj.disabled = item.disabled
|
|
this.buyPaperDto.width = item.width
|
|
this.buyPaperDto.length = item.length
|
|
},
|
|
/**
|
|
* @param {Number} num
|
|
* 计数器返回值
|
|
*/
|
|
change(num) {
|
|
this.buyPaperDto.pieceQuantity = num
|
|
},
|
|
// 确定
|
|
confirm() {
|
|
// 加入购物车
|
|
if(this.shoppingCarType == 1) {
|
|
const params = {
|
|
length: this.specificationObj.length,
|
|
productId: this.info.id,
|
|
productSkuId: this.info.skuList[0].id,
|
|
quantity: this.buyPaperDto.pieceQuantity,
|
|
supplierId: this.info.supplierId,
|
|
width: this.specificationObj.width,
|
|
enterpriseId: this.$store.state.companyInfo.id,
|
|
userId: this.$store.state.userInfo.userId
|
|
}
|
|
// console.log('加入购物车', params)
|
|
createShoppingCar(params).then(res => {
|
|
if(res) {
|
|
uni.showToast({
|
|
title: '加入成功！',
|
|
icon: 'success'
|
|
})
|
|
this.$refs.popup.close()
|
|
}
|
|
})
|
|
}else { // 立即订购
|
|
const params = {
|
|
orderGoodsList: [{ ...this.buyPaperDto }],
|
|
purchaserEnterpriseId: this.$store.state.companyInfo.id
|
|
}
|
|
createGoodsReserve(params).then(res => {
|
|
if (res) {
|
|
uni.showToast({
|
|
title: '订购成功！',
|
|
icon: 'success'
|
|
})
|
|
this.$refs.popup.close()
|
|
setTimeout(() => {
|
|
go2('order-make', { orderId: res.orderId })
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
// 轮播图片滑动
|
|
swiperChange(e) {
|
|
this.current = e.detail.current
|
|
},
|
|
previewImg(index, list) {
|
|
uni.previewImage({
|
|
urls: list,
|
|
current: index
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.warpper {
|
|
.swiper-dot {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
}
|
|
.image {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
}
|
|
.info-box {
|
|
height: 370rpx;
|
|
background: #ffffff;
|
|
.info {
|
|
padding: 0rpx 32rpx;
|
|
.price-row {
|
|
padding: 20rpx 0rpx;
|
|
}
|
|
.price {
|
|
font-size: 48rpx;
|
|
color: #f5222d;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
}
|
|
.unit {
|
|
font-size: 28rpx;
|
|
color: #f5222d;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 20rpx;
|
|
.name {
|
|
font-size: 34rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
.value {
|
|
font-size: 24rpx;
|
|
color: rgba(0, 0, 0, 0.55);
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.list-box {
|
|
margin: 0rpx 32rpx;
|
|
height: 104rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-top: 2rpx solid rgba($color: #dddddd, $alpha: 0.8);
|
|
.label {
|
|
flex: 0 0 84rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
}
|
|
.tag-box {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
background: #f4f5f6;
|
|
border-radius: 4rpx;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
margin-right: 10rpx;
|
|
padding: 0rpx 17rpx;
|
|
}
|
|
}
|
|
}
|
|
.other {
|
|
padding: 0rpx 32rpx;
|
|
border-bottom: 2rpx solid #d8d8d8;
|
|
background: #ffffff;
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
padding: 24rpx 0rpx 16rpx 0rpx;
|
|
}
|
|
.desc {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
padding: 0rpx 0rpx 24rpx 0rpx;
|
|
}
|
|
}
|
|
.footer-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
// align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0rpx 32rpx;
|
|
.left {
|
|
flex: 0 0 294rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
padding-right: 24rpx;
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
.label {
|
|
font-size: 22rpx;
|
|
color: #555555;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
padding-top: 6rpx;
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
.inquiry-btn {
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background: #faab0c;
|
|
border-top-left-radius: 2002000rpx;
|
|
border-bottom-left-radius: 2002000rpx;
|
|
}
|
|
.book-btn {
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background: #ee0a24;
|
|
border-top-right-radius: 2002000rpx;
|
|
border-bottom-right-radius: 2002000rpx;
|
|
}
|
|
}
|
|
}
|
|
.popup_modal {
|
|
// height: 960rpx;
|
|
background: #ffffff;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
.card-box {
|
|
padding: 0rpx 32rpx;
|
|
.box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
// align-items: center;
|
|
// height: 240rpx;
|
|
background: #ffffff;
|
|
border-bottom: 2rpx solid #d8d8d8;
|
|
padding: 40rpx 0rpx;
|
|
.image {
|
|
flex: 0 0 160rpx;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 10px;
|
|
margin-right: 20rpx;
|
|
}
|
|
.right-box {
|
|
flex: 1;
|
|
width: 100%;
|
|
padding-top: 10rpx;
|
|
}
|
|
.title-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.name {
|
|
font-size: 34rpx;
|
|
color: #000000;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
.close-icon {
|
|
position: relative;
|
|
top: -20rpx;
|
|
}
|
|
}
|
|
.price {
|
|
font-size: 40rpx;
|
|
color: #f5222d;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.choose-box {
|
|
border-bottom: 2rpx solid #d8d8d8;
|
|
padding: 24rpx 32rpx;
|
|
.label {
|
|
font-size: 30rpx;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
font-weight: 400;
|
|
padding: 0rpx 0rpx 20rpx 0rpx;
|
|
}
|
|
.tag-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.tag-box {
|
|
padding: 0rpx 47rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 8px;
|
|
margin-right: 12rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(0, 0, 0, 0.75);
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
.kg-select {
|
|
background: #1890ff;
|
|
color: #ffffff;
|
|
}
|
|
.input-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
.easyinput {
|
|
height: 64rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
}
|
|
.symbol {
|
|
padding: 0rpx 16rpx;
|
|
font-size: 32rpx;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.quantity-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx 32rpx 0rpx 32rpx;
|
|
.label {
|
|
font-size: 30rpx;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.ygzl-text {
|
|
padding: 20rpx 32rpx 0rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 24rpx;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
font-weight: 400;
|
|
}
|
|
.popup-footer-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
padding: 48rpx 32rpx 20rpx 32rpx;
|
|
.btn {
|
|
width: 686rpx;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
text-align: center;
|
|
background: #007aff;
|
|
border-radius: 10rpx;
|
|
font-size: 36rpx;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|