qniao
/
paper-shopkeeper-H5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

立即订购对接

devlop
buffeyu 4 years ago
parent
28242dfaf5
commit
49a67da57c
8 changed files with 485 additions and 219 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      apis/cartApi.js
  2. 20
      apis/paperDetailsApi.js
  3. 2
      components/qn-input-number/qn-input-number.vue
  4. 188
      pages/cart/index.vue
  5. 68
      pages/cart/no-data.vue
  6. 401
      pages/paper-details/index.vue
  7. BIN
      static/imgs/cart/no-data-icon.png
  8. 2
      uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue

23
apis/cartApi.js
View File

@ -0,0 +1,23 @@
import http from '../utils/http/index.js'
// 获取购物车列表
export function getShoppingCarList(data) {
return http.get(
{
url: '/base-paper-trading/get/shopping-car-list',
data
},
{
hideLoading: true
}
)
}
// 移除购物车
export function removeShoppingCar(data) {
return http.post(
{
url: '/base-paper-trading/delete/shopping-car',
data
}
)
}

20
apis/paperDetailsApi.js
View File

@ -11,4 +11,24 @@ export const getPaperDetail = (data = {}) => {
url: '/base-paper-trading/get/product-detail/for/customer', url: '/base-paper-trading/get/product-detail/for/customer',
data data
}) })
}
/**
* 立即订购
* swagger:https://api-ops-yyt-test.qniao.cn//base-paper-trading/swagger-ui/index.html?urls.primaryName=CustomerApi#/
*/
export const createGoodsReserve = (data = {}) => {
return http.post({
url: '/base-paper-trading/buyer/paper/goods/reserve',
data
})
}
/**
* 加入购物车
* swagger：http://api-ops-yyt-test.qniao.cn/base-paper-trading/swagger-ui/index.html?urls.primaryName=CustomerApi#/%E8%B4%AD%E7%89%A9%E8%BD%A6/addShoppingCarUsingPOST
*/
export const createShoppingCar = (data = {}) => {
return http.post({
url: '/base-paper-trading/add/shopping-car',
data
})
} }

2
components/qn-input-number/qn-input-number.vue
View File

@ -41,9 +41,11 @@
return return
} }
this.value-- this.value--
this.$emit('change', this.value)
}, },
addTap() { addTap() {
this.value++ this.value++
this.$emit('change', this.value)
} }
} }
} }

188
pages/cart/index.vue
View File

@ -1,39 +1,39 @@
<template> <template>
<view class="warpper"> <view class="warpper">
<uni-nav-bar>
<uni-nav-bar :fixed="true" color="#ffffff" background-color="#ffffff" :status-bar="true">
<view slot="left" class="left-title">购物车</view> <view slot="left" class="left-title">购物车</view>
<view slot="right" class="right-title">删除</view>
<view slot="right" v-if="pageShow" class="right-title" @tap="delTap">删除</view>
</uni-nav-bar> </uni-nav-bar>
<view class="" v-if="pageShow">
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
<view class="group-box" v-for="(item, index) in 6" :key="index">
<view class="group-box" v-for="(item, index) in list" :key="index">
<uGap></uGap> <uGap></uGap>
<view class="group-checkbox"> <view class="group-checkbox">
<view class="checkbox"> <view class="checkbox">
<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" /></checkbox-group> <checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" /></checkbox-group>
</view> </view>
<view class="">广州市荔湾区强丰纸业</view>
<view class="">{{item.supplierName}}</view>
</view> </view>
<view class="list-box" v-for="(subItem, subIndex) in 2" :key="subIndex">
<view class="list-box" v-for="(subItem, subIndex) in item.carItemList" :key="subIndex">
<view class="checkbox"> <view class="checkbox">
<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" /></checkbox-group> <checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" /></checkbox-group>
</view> </view>
<view class="list-row"> <view class="list-row">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image> <image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<view class="right"> <view class="right">
<view class="name">晨鸣丽品白卡</view>
<view class="measure">245g｜787*1092</view>
<view class="weight">预估重量：1.6346吨</view>
<view class="name">{{subItem.productName}}</view>
<view class="measure">{{subItem.gramWeight}}g｜{{subItem.width}}*{{subItem.length}}</view>
<view class="weight">预估重量：{{subItem.weight}}吨</view>
<view class="price-row"> <view class="price-row">
<view class="value">¥3600.00</view>
<view class="value">¥{{subItem.price}}</view>
<view class=""><qnInputNumber @change="change" /></view> <view class=""><qnInputNumber @change="change" /></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</scroll-list> </scroll-list>
<!-- <qn-footer fixed height="100rpx" >
<view class="footer-box">
<view class="row"> <view class="row">
<view class="left"> <view class="left">
<view class=""> <view class="">
@ -49,24 +49,27 @@
<view class="right-balance-btn">结算</view> <view class="right-balance-btn">结算</view>
</view> </view>
</view> </view>
</qn-footer> -->
<view class="footer-box">
<view class="row">
<view class="left">
<view class="">
<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)"></checkbox></checkbox-group>
</view>
<view class=""><text class="check-text">全选</text></view>
</view>
</view>
<uni-popup ref="popup" type="center" :mask-click="false">
<view class="popup-box">
<view class="tip-title">
确定将当前纸品删除吗？
</view> </view>
<view class="right">
<view class="">
<text class="name">应付：</text>
<text class="value">¥7200.00</text>
<view class="operation-row">
<view class="cancel-text" @tap="cancelTap">
取消
</view>
<view class="line">
</view>
<view class="confirm-text" @tap="confirmTap">
确定
</view> </view>
<view class="right-balance-btn">结算</view>
</view> </view>
</view> </view>
</view>
</uni-popup>
<no-data v-if="!pageShow"></no-data>
</view> </view>
</template> </template>
@ -75,10 +78,13 @@ import uGap from '@/components/u-gap/u-gap.vue'
import qnFooter from '@/components/qn-footer/qn-footer.vue' import qnFooter from '@/components/qn-footer/qn-footer.vue'
import { back, go2 } from '@/utils/hook.js' import { back, go2 } from '@/utils/hook.js'
import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue' import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue'
import { getShoppingCarList, removeShoppingCar } from '@/apis/cartApi.js'
import noData from './no-data.vue'
export default { export default {
components: { uGap, qnInputNumber, qnFooter },
components: { uGap, qnInputNumber, qnFooter, noData },
data() { data() {
return { return {
pageShow: true,
option: { option: {
size: 10, size: 10,
auto: true, auto: true,
@ -87,30 +93,83 @@ export default {
background: '#F7F8FA', background: '#F7F8FA',
disabled: false disabled: false
}, },
params: {},
params: {
userId : this.$store.state.userInfo.userId || null,
},
pagination: { pagination: {
pageNum: 0, // 初始会执行一次下拉加载 pageNum: 0, // 初始会执行一次下拉加载
pageSize: 10 pageSize: 10
}, },
checked: false, checked: false,
list: [],
} }
}, },
created() { created() {
let that = this let that = this
uni.getSystemInfo({ uni.getSystemInfo({
success: function (res) {
console.log( '状态栏的高', res.statusBarHeight);
that.option.height = (res.windowHeight) * (750/res.windowWidth) - 180
}
});
},
onLoad() {
success: function(res) {
console.log('状态栏的高', res.statusBarHeight)
that.option.height = res.windowHeight * (750 / res.windowWidth) - 180
}
})
}, },
onLoad() {},
methods: { methods: {
downCallback() {},
upCallback() {},
getList() {
return new Promise((resolve, reject) => {
getShoppingCarList({ ...this.params, ...this.pagination })
.then(res => {
// console.log('购物车', res)
if (res) {
if(res.records.length == 0) {
this.pageShow = false
return
}
if (this.pagination.pageNum == 1) {
this.list = res.records
} else {
this.list = this.list.concat(res.records)
}
// this.list = []
// this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]
resolve({ list: this.list, total: res.total })
}
})
.catch(err => {
reject(err)
})
})
},
downCallback() {
this.pagination.pageNum = 1
this.getList()
.then(({ list, total }) => {
this.$refs.list.refreshSuccess({ list, total })
})
.catch(() => {
this.$refs.list.refreshFail()
})
},
upCallback() {
this.pagination.pageNum++
this.getList()
.then(({ list, total }) => {
this.$refs.list.loadSuccess({ list, total })
})
.catch(() => {
this.$refs.list.loadFail()
})
},
delTap() {
this.$refs.popup.open('center')
},
confirmTap() {
this.$refs.popup.close()
},
cancelTap() {
this.$refs.popup.close()
},
/** /**
* @param {Number} num * @param {Number} num
* 计数器返回值 * 计数器返回值
@ -133,6 +192,7 @@ export default {
color: #f5222d; color: #f5222d;
text-align: right; text-align: right;
font-weight: 500; font-weight: 500;
float: right;
} }
.group-box { .group-box {
// padding: 0rpx 32rpx; // padding: 0rpx 32rpx;
@ -269,5 +329,57 @@ export default {
} }
} }
} }
.popup-box {
width: 540rpx;
height: 226rpx;
background: #FFFFFF;
border-radius: 14rpx;
.tip-title {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 126rpx;
font-size: 32rpx;
color: #333333;
letter-spacing: 0;
text-align: center;
font-weight: 400;
}
.operation-row {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 100rpx;
background: #FFFFFF;
border-top: 2rpx solid #DDDDDD;
.cancel-text {
flex-grow: 1;
flex-shrink: 1;
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 400;
}
.line {
flex-grow: 0;
flex-shrink: 0;
width: 2rpx;
height: 100rpx;
border-left: 2rpx solid #DCDEE3;
}
.confirm-text{
flex-grow: 1;
flex-shrink: 1;
font-size: 36rpx;
color: #108EE9;
letter-spacing: 0;
text-align: center;
font-weight: 400;
}
}
}
} }
</style> </style>

68
pages/cart/no-data.vue
View File

@ -0,0 +1,68 @@
<template>
<view class="warpper">
<image class="icon" src="/static/imgs/cart/no-data-icon.png"></image>
<view class="text-row">
<view class="">
购物车是空的，快去
</view>
<view class="btn" @tap="nativeTo">
逛逛
</view>
</view>
</view>
</template>
<script>
import { back, go2, loginG2 } from '@/utils/hook.js'
export default {
props: {
title:{
type: String,
default: null
}
},
data() {
return {
}
},
methods: {
// 按钮点击事件
nativeTo() {
go2('store')
},
}
}
</script>
<style lang="scss">
.warpper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 25%;
.icon {
width: 560rpx;
height: 320rpx;
}
.text-row {
display: flex;
flex-direction: row;
font-size: 30rpx;
color: #333333;
letter-spacing: 0;
text-align: center;
font-weight: 400;
}
.btn {
font-size: 32rpx;
color: #007AFF;
letter-spacing: 0;
text-align: center;
font-weight: 400;
text-decoration: underline;
}
}
</style>

401
pages/paper-details/index.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<view class="warpper"> <view class="warpper">
<view class="swiper-dot"> <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%;">
<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"> <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>
<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-item>
</swiper> </swiper>
</uni-swiper-dot> </uni-swiper-dot>
@ -13,179 +15,112 @@
<view class="info-box"> <view class="info-box">
<view class="info"> <view class="info">
<view class="price-row"> <view class="price-row">
<text class="price">¥{{info.skuList[0].listPrice}}</text>
<text class="unit">/{{info.skuList[0].stockUnit}}</text>
<text class="price">¥{{ info.skuList[0].listPrice }}</text>
<text class="unit">/{{ info.skuList[0].stockUnit }}</text>
</view> </view>
<view class="row"> <view class="row">
<view class="name">
{{ info.name }}
</view>
<view class="value">
库存：{{info.skuList[0].stock || XX}}{{info.skuList[0].stockUnit}}
</view>
<view class="name">{{ info.name }}</view>
<view class="value">库存：{{ info.skuList[0].stock || XX }}{{ info.skuList[0].stockUnit }}</view>
</view> </view>
</view> </view>
<view class="list-box"> <view class="list-box">
<view class="label">
克重：
</view>
<view class="label">克重：</view>
<view class="tag-box" v-for="(titem, tindex) in info.skuList" :key="tindex"> <view class="tag-box" v-for="(titem, tindex) in info.skuList" :key="tindex">
<text>{{titem.weight}}g</text>
<text>{{ titem.weight }}g</text>
</view> </view>
</view> </view>
<view class="list-box"> <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 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>
</view> </view>
<uGap></uGap> <uGap></uGap>
<view class="other"> <view class="other">
<view class="title">
商品卖点
</view>
<view class="desc">
{{info.sellingProposition}}
</view>
<view class="title">商品卖点</view>
<view class="desc">{{ info.sellingProposition }}</view>
</view> </view>
<view class="other"> <view class="other">
<view class="title">
商品描述
</view>
<view class="desc">
{{info.description}}
</view>
<view class="title">商品描述</view>
<view class="desc">{{ info.description }}</view>
</view> </view>
<view class="other"> <view class="other">
<view class="title">
送货说明
</view>
<view class="desc">
{{info.shippingNote}}
</view>
<view class="title">送货说明</view>
<view class="desc">{{ info.shippingNote }}</view>
</view> </view>
<view class="other" style="border: none;"> <view class="other" style="border: none;">
<view class="title">
其他说明
</view>
<view class="desc">
{{info.otherNote}}
</view>
<view class="title">其他说明</view>
<view class="desc">{{ info.otherNote }}</view>
</view> </view>
<qn-footer fixed height="100rpx"> <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 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>
</view>
<view class="">
<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image>
<view class="label" @tap="shoppingCartTap">
购物车
<view class="">
<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image>
<view class="label" @tap="shoppingCartTap">购物车</view>
</view> </view>
</view>
<view class="" @tap='addShoppingTap'>
<image class="icon" src="/static/imgs/paperDetails/add-shopping-trolley.png"></image>
<view class="label">
加购物车
<view class="" @tap="addShoppingTap(1)">
<image class="icon" src="/static/imgs/paperDetails/add-shopping-trolley.png"></image>
<view class="label">加购物车</view>
</view> </view>
</view> </view>
</view>
<view class="right">
<view class="inquiry-btn" @tap="inquiryTap">
立即询单
</view>
<view class="book-btn" @tap='addShoppingTap'>
立即订购
<view class="right">
<view class="inquiry-btn" @tap="inquiryTap">立即询单</view>
<view class="book-btn" @tap="addShoppingTap(2)">立即订购</view>
</view> </view>
</view> </view>
</view>
</qn-footer> </qn-footer>
<uni-popup ref="popup" type="bottom"> <uni-popup ref="popup" type="bottom">
<view class="popup_modal"> <view class="popup_modal">
<!-- <slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot> --> <!-- <slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot> -->
<view class="card-box"> <view class="card-box">
<view class="box"> <view class="box">
<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
<!-- <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="right-box">
<view class="title-row"> <view class="title-row">
<view class="name">
博汇朱雀白卡
</view>
<view class="close-icon" @tap="closeTap">
<uni-icons size="20" type="close" color="#888888"></uni-icons>
</view>
</view>
<view class="price">
¥7630.28
<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>
<view class="price">¥{{ buyPaperDto.unitPrice }}</view>
</view> </view>
</view> </view>
</view> </view>
<view class="choose-box"> <view class="choose-box">
<view class="label">
请选择克重
</view>
<view class="label">请选择克重</view>
<view class="tag-row"> <view class="tag-row">
<view
:class="['tag-box', kgActive === kIndex ? 'kg-select' : '']"
v-for="(kItem,kIndex) in weightList"
:key='kIndex'
@tap="weightTap(kItem, kIndex)">
{{kItem}}g
<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>
</view> </view>
<view class="choose-box"> <view class="choose-box">
<view class="label">
请选择规格
</view>
<view class="label">请选择规格</view>
<view class="tag-row"> <view class="tag-row">
<view
:class="['tag-box', ggActive === sIndex ? 'kg-select' : '']"
v-for="(sItem,sIndex) in specificationList"
:key='sIndex'
@tap="specificationTap(sItem, sIndex)">
{{sItem}}
<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> </view>
<view class="input-row"> <view class="input-row">
<view class="">
<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput>
</view>
<view class="symbol">
x
</view>
<view class="">
<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput>
</view>
<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> </view>
<view class="quantity-row"> <view class="quantity-row">
<view class="label">
购买数量(张)
</view>
<view class="">
<qnInputNumber @change="change"/>
</view>
</view>
<view class="ygzl-text">
预估重量：1.6346吨
</view>
<view class="popup-footer-row">
<view class="btn" @tap="confirm">
确认
</view>
<view class="label">购买数量(张)</view>
<view class=""><qnInputNumber @change="change" /></view>
</view> </view>
<view class="ygzl-text">预估重量：{{ buyTon }}吨</view>
<view class="popup-footer-row"><view class="btn" @tap="confirm">确认</view></view>
</view> </view>
</uni-popup> </uni-popup>
</view> </view>
@ -196,33 +131,81 @@ import uGap from '@/components/u-gap/u-gap.vue'
import qnFooter from '@/components/qn-footer/qn-footer.vue' import qnFooter from '@/components/qn-footer/qn-footer.vue'
import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue' import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue'
import { go2 } from '@/utils/hook.js' import { go2 } from '@/utils/hook.js'
import { getPaperDetail } from '@/apis/paperDetailsApi.js'
import { getPaperDetail, createGoodsReserve, createShoppingCar } from '@/apis/paperDetailsApi.js'
export default { export default {
components: { uGap, qnFooter, qnInputNumber }, components: { uGap, qnFooter, qnInputNumber },
data() { data() {
return { return {
current: 0, current: 0,
weightList: ['240', '250', '280'], weightList: ['240', '250', '280'],
specificationList: ['正度', '大度', '特规分切'],
specificationList: [
{
name: '正度',
width: '787',
length: '1092',
disabled: true
},
{
name: '特规分切',
width: '889',
length: '1194',
disabled: true
},
{
name: '特规分切',
width: '',
length: '',
disabled: false
}
],
kgActive: 0, kgActive: 0,
ggActive: 0,
specificationObj: {
active: 0,
width: '787',
length: '1092',
disabled: true
},
value: null, value: null,
params: { params: {
productId: ''
},
buyPaperDto: {
buyTon: '',
gramWeight: '',
length: '',
mallSupplierId: '',
pieceQuantity: '',
productId: '', productId: '',
productSkuId: '',
unitPrice: '',
width: '',
img: '',
listPrice: '',
name: ''
}, },
info: {}
shoppingCarType: 1, // 1：加购物车 2：订购
info: {},
} }
}, },
onLoad(option) { onLoad(option) {
this.params.productId = option.id this.params.productId = option.id
this.queryData() this.queryData()
}, },
methods:{
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() { queryData() {
getPaperDetail(this.params).then(res => { getPaperDetail(this.params).then(res => {
console.log('店铺纸品详情', res) console.log('店铺纸品详情', res)
if(res) {
if (res) {
this.info = res this.info = res
} }
}) })
@ -235,12 +218,26 @@ export default {
shoppingCartTap() { shoppingCartTap() {
go2('cart') go2('cart')
}, },
addShoppingTap() {
// 立即订购
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') this.$refs.popup.open('bottom')
}, },
// 路由到实单询比价 // 路由到实单询比价
inquiryTap() { inquiryTap() {
go2('for-comparison', {id: null})
go2('for-comparison', { id: null })
}, },
closeTap() { closeTap() {
this.$refs.popup.close() this.$refs.popup.close()
@ -248,32 +245,78 @@ export default {
// 重量切换 // 重量切换
weightTap(item, index) { weightTap(item, index) {
this.kgActive = index this.kgActive = index
this.buyPaperDto.gramWeight = item.weight
}, },
// 规格切换 // 规格切换
specificationTap(item, index) { specificationTap(item, index) {
this.ggActive = 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 * @param {Number} num
* 计数器返回值 * 计数器返回值
*/ */
change(num) { change(num) {
this.buyPaperDto.pieceQuantity = num
}, },
// 确定 // 确定
confirm() { confirm() {
this.$refs.popup.close()
// 加入购物车
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) { swiperChange(e) {
this.current = e.detail.current;
this.current = e.detail.current
}, },
previewImg(index, list) { previewImg(index, list) {
uni.previewImage({ uni.previewImage({
urls: list, urls: list,
current: index current: index
});
},
})
}
} }
} }
</script> </script>
@ -290,7 +333,7 @@ export default {
} }
.info-box { .info-box {
height: 370rpx; height: 370rpx;
background: #FFFFFF;
background: #ffffff;
.info { .info {
padding: 0rpx 32rpx; padding: 0rpx 32rpx;
.price-row { .price-row {
@ -298,15 +341,14 @@ export default {
} }
.price { .price {
font-size: 48rpx; font-size: 48rpx;
color: #F5222D;
color: #f5222d;
letter-spacing: 0; letter-spacing: 0;
text-align: left; text-align: left;
font-weight: 500; font-weight: 500;
} }
.unit { .unit {
font-size: 28rpx; font-size: 28rpx;
color: #F5222D;
color: #f5222d;
letter-spacing: 0; letter-spacing: 0;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
@ -326,7 +368,7 @@ export default {
} }
.value { .value {
font-size: 24rpx; font-size: 24rpx;
color: rgba(0,0,0,0.55);
color: rgba(0, 0, 0, 0.55);
letter-spacing: 0; letter-spacing: 0;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
@ -339,7 +381,7 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border-top: 2rpx solid rgba($color: #DDDDDD, $alpha: 0.8);
border-top: 2rpx solid rgba($color: #dddddd, $alpha: 0.8);
.label { .label {
flex: 0 0 84rpx; flex: 0 0 84rpx;
font-size: 28rpx; font-size: 28rpx;
@ -352,7 +394,7 @@ export default {
height: 60rpx; height: 60rpx;
line-height: 60rpx; line-height: 60rpx;
text-align: center; text-align: center;
background: #F4F5F6;
background: #f4f5f6;
border-radius: 4rpx; border-radius: 4rpx;
font-size: 28rpx; font-size: 28rpx;
color: #555555; color: #555555;
@ -365,8 +407,8 @@ export default {
} }
.other { .other {
padding: 0rpx 32rpx; padding: 0rpx 32rpx;
border-bottom: 2rpx solid #D8D8D8;
background: #FFFFFF;
border-bottom: 2rpx solid #d8d8d8;
background: #ffffff;
.title { .title {
font-size: 28rpx; font-size: 28rpx;
color: #000000; color: #000000;
@ -412,23 +454,23 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 0; letter-spacing: 0;
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
.inquiry-btn{
.inquiry-btn {
width: 200rpx; width: 200rpx;
height: 80rpx; height: 80rpx;
line-height: 80rpx; line-height: 80rpx;
background: #FAAB0C;
background: #faab0c;
border-top-left-radius: 2002000rpx; border-top-left-radius: 2002000rpx;
border-bottom-left-radius: 2002000rpx; border-bottom-left-radius: 2002000rpx;
} }
.book-btn{
.book-btn {
width: 200rpx; width: 200rpx;
height: 80rpx; height: 80rpx;
line-height: 80rpx; line-height: 80rpx;
background: #EE0A24;
background: #ee0a24;
border-top-right-radius: 2002000rpx; border-top-right-radius: 2002000rpx;
border-bottom-right-radius: 2002000rpx; border-bottom-right-radius: 2002000rpx;
} }
@ -436,7 +478,7 @@ export default {
} }
.popup_modal { .popup_modal {
// height: 960rpx; // height: 960rpx;
background: #FFFFFF;
background: #ffffff;
border-radius: 20rpx 20rpx 0 0; border-radius: 20rpx 20rpx 0 0;
.card-box { .card-box {
padding: 0rpx 32rpx; padding: 0rpx 32rpx;
@ -445,8 +487,8 @@ export default {
flex-direction: row; flex-direction: row;
// align-items: center; // align-items: center;
// height: 240rpx; // height: 240rpx;
background: #FFFFFF;
border-bottom: 2rpx solid #D8D8D8;
background: #ffffff;
border-bottom: 2rpx solid #d8d8d8;
padding: 40rpx 0rpx; padding: 40rpx 0rpx;
.image { .image {
flex: 0 0 160rpx; flex: 0 0 160rpx;
@ -472,26 +514,26 @@ export default {
font-weight: 600; font-weight: 600;
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.close-icon{
.close-icon {
position: relative; position: relative;
top: -20rpx; top: -20rpx;
} }
} }
.price{
.price {
font-size: 40rpx; font-size: 40rpx;
color: #F5222D;
color: #f5222d;
letter-spacing: 0; letter-spacing: 0;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
} }
} }
} }
.choose-box{
border-bottom: 2rpx solid #D8D8D8;
.choose-box {
border-bottom: 2rpx solid #d8d8d8;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
.label{
.label {
font-size: 30rpx; font-size: 30rpx;
color: rgba(0,0,0,0.85);
color: rgba(0, 0, 0, 0.85);
letter-spacing: 0; letter-spacing: 0;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
@ -502,62 +544,61 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.tag-box{
.tag-box {
padding: 0rpx 47rpx; padding: 0rpx 47rpx;
height: 60rpx; height: 60rpx;
line-height: 60rpx; line-height: 60rpx;
background: #F5F5F5;
background: #f5f5f5;
border-radius: 8px; border-radius: 8px;
margin-right: 12rpx; margin-right: 12rpx;
font-size: 28rpx; font-size: 28rpx;
color: rgba(0,0,0,0.75);
color: rgba(0, 0, 0, 0.75);
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
} }
.kg-select { .kg-select {
background: #1890FF;
color: #FFFFFF;
background: #1890ff;
color: #ffffff;
} }
.input-row{
.input-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding-top: 20rpx; padding-top: 20rpx;
.easyinput{
.easyinput {
height: 64rpx; height: 64rpx;
background: #F5F5F5;
background: #f5f5f5;
border-radius: 8rpx; border-radius: 8rpx;
} }
.symbol{
.symbol {
padding: 0rpx 16rpx; padding: 0rpx 16rpx;
font-size: 32rpx; font-size: 32rpx;
color: rgba(0,0,0,0.85);
color: rgba(0, 0, 0, 0.85);
font-weight: 400; font-weight: 400;
} }
} }
} }
.quantity-row{
.quantity-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 32rpx 32rpx 0rpx 32rpx; padding: 32rpx 32rpx 0rpx 32rpx;
.label{
.label {
font-size: 30rpx; font-size: 30rpx;
color: rgba(0,0,0,0.85);
color: rgba(0, 0, 0, 0.85);
letter-spacing: 0; letter-spacing: 0;
font-weight: 400; font-weight: 400;
} }
} }
.ygzl-text{
padding:20rpx 32rpx 0rpx ;
.ygzl-text {
padding: 20rpx 32rpx 0rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 24rpx; font-size: 24rpx;
color: rgba(0,0,0,0.50);
color: rgba(0, 0, 0, 0.5);
font-weight: 400; font-weight: 400;
} }
.popup-footer-row { .popup-footer-row {
@ -570,10 +611,10 @@ export default {
height: 96rpx; height: 96rpx;
line-height: 96rpx; line-height: 96rpx;
text-align: center; text-align: center;
background: #007AFF;
background: #007aff;
border-radius: 10rpx; border-radius: 10rpx;
font-size: 36rpx; font-size: 36rpx;
color: #FFFFFF;
color: #ffffff;
font-weight: 500; font-weight: 500;
} }
} }

BIN
static/imgs/cart/no-data-icon.png
View File

Before After
Width: 560  |  Height: 320  |  Size: 41 KiB

2
uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
View File

@ -181,7 +181,7 @@
display: flex; display: flex;
/* #endif */ /* #endif */
flex-wrap: nowrap; flex-wrap: nowrap;
width: 120rpx;
// width: 120rpx;
// padding: 0 6px; // padding: 0 6px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

Write Preview
Loading…
Cancel
Save