【前端】纸掌柜h5端
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.

749 lines
20 KiB

<template>
<view class="wrapper">
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="纸品详情"></uni-nav-bar>
<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/paper_shopkeeper/paper-default.png'" 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] ? info.skuList[0].listPrice : '-' }}</text>
<text class="unit">/{{ (info.skuList[0] ? info.skuList[0].stockUnit : '-') | stockUnit }}</text>
</view>
<view class="row">
<view class="name">{{ info.name }}</view>
<view class="value">
库存:{{ info.skuList[0] ? info.skuList[0].stock : '-' || 'XX' }}{{ (info.skuList[0] ? info.skuList[0].stockUnit : '-') | 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 @click="storeTap">
<image class="icon" src="/static/imgs/paperDetails/shop-icon.png"></image>
<view class="label">店铺</view>
</view>
<view @click="shoppingCartTap">
<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image>
<view class="label">购物车</view>
</view>
<view @click="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, back } from '@/utils/hook.js'
import { getPaperDetail, createGoodsReserve, createShoppingCar } from '@/apis/paperDetailsApi.js'
import { round } from '@/utils/index.js'
import { fddEnterpriseStatus } from '@/enums/index.js'
import { getVerifyUrl } from '@/apis/commonApi.js'
const validateFields = [
{
value: 'length',
label: '纸品长度'
},
{
value: 'width',
label: '纸品宽度'
},
{
value: 'gramWeight',
label: '纸品克重'
},
{
value: 'pieceQuantity',
label: '购买数量'
}
]
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: {
skuList: []
}
}
},
filters: {
stockUnit(value) {
let name = value == 1 ? '张' : '吨'
return name
}
},
onLoad(option) {
if (option.paperId) {
this.params.productId = option.paperId
if (this.hasLogin) {
this.queryData()
} else {
this.$store.commit('setNextPage', { name: 'paper-detail', data: { paperId: option.paperId } })
go2('login')
}
} else {
uni.showToast({
title: '参数错误',
icon: 'fail',
success: () => {
back()
}
})
}
},
computed: {
buyTon() {
let num = 0
num = round(this.buyPaperDto.gramWeight * this.buyPaperDto.width * this.buyPaperDto.length * this.buyPaperDto.pieceQuantity * 1e-12, 4)
return num
},
hasCompany() {
return this.$store.state.companyInfo.id != null
},
hasLogin() {
return this.$store.state.qnToken != ''
}
},
watch: {
buyTon(newVal) {
this.buyPaperDto.buyTon = newVal
}
},
methods: {
back,
// 查询店铺纸品详情
queryData() {
getPaperDetail(this.params).then((res) => {
console.log('店铺纸品详情', res)
if (res) {
this.info = res
if (!this.info.imgList || this.info.imgList.length == 0) {
this.info.imgList = ['']
}
}
})
},
// 点击店铺
storeTap() {
go2('store')
},
// 点击购物车
shoppingCartTap() {
go2('cart')
},
// 立即订购
addShoppingTap(type) {
if (!this.hasCompany) {
uni.showModal({
title: '提示',
content: '请先完善公司信息',
success: (res) => {
if (res.confirm) {
go2('enterprise-info')
}
}
})
return
}
if (this.$store.state.companyInfo.fddEnterpriseStatus != fddEnterpriseStatus.CERTIFIED_SUCCESS) {
uni.showModal({
title: '提示',
content: '请先进行法大大认证',
success: (res) => {
if (res.confirm) {
getVerifyUrl({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => {
if (res) {
// #ifdef APP-PLUS
go2('page-view', {
title: '实名认证',
url: encodeURIComponent(res)
})
// #endif
// #ifdef H5
window ? (window.location.href = res) : ''
// #endif
}
})
}
}
})
return
}
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() {
if (!this.hasCompany) {
uni.showToast({
title: '请先完善公司信息',
icon: 'none'
})
return
}
go2('for-comparison', { id: this.info.supplierId, productImg: this.info.imgList[0] })
},
closeTap() {
this.$refs.popup.close()
},
// 重量切换
weightTap(item, index) {
console.log('item', item)
this.kgActive = index
this.buyPaperDto.gramWeight = item.weight
this.buyPaperDto.unitPrice = item.listPrice
this.buyPaperDto.productSkuId = item.id
},
// 规格切换
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() {
// 校验
for (let i = 0; i < validateFields.length; i++) {
let item = validateFields[i]
if (!this.buyPaperDto[item.value]) {
uni.showToast({
title: item.label + '必须大于0',
icon: 'none'
})
return
}
}
// 加入购物车
if (this.shoppingCarType == 1) {
const params = {
length: this.buyPaperDto.length,
productId: this.info.id,
productSkuId: this.buyPaperDto.productSkuId,
quantity: this.buyPaperDto.pieceQuantity,
supplierId: this.info.supplierId,
width: this.buyPaperDto.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">
.wrapper {
.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 rgba(221, 221, 221, 0.5);
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 rgba(221, 221, 221, 0.5);
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 rgba(221, 221, 221, 0.5);
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>