qniao
/
paper-shopkeeper-H5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
【前端】纸掌柜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.
82 Commits
2 Branches
0 Tags
2.6 MiB
Tree: 26763f2e54
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '26763f2e54'
${ noResults }
paper-shopkeeper-H5/pages/for-comparison/index.vue

623 lines
18 KiB
Raw Blame History

<template>
<view class="content">
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="实单询比价"></uni-nav-bar>
<view>
<view class="hint-box">全网优质原纸供应商，20分钟极速响应。</view>
<view class="qn-form-item qn-form-item">
<view class="label">
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
<text class="label__text">纸种</text>
</view>
<view class="value">
<picker :value="form.categoryIndex" @change="categoryChange" :range="categoryNameList">
<view>
<text class="uni-input">{{ form.categoryName }}</text>
<uni-icons type="right" color="#000000" size="16"></uni-icons>
</view>
</picker>
</view>
</view>
<view class="qn-form-item qn-form-item">
<view class="label">
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
<text class="label__text">品牌</text>
</view>
<view class="value">
<picker :value="form.brandIndex" @change="brandChange" :range="brandNameList">
<view>
<text class="uni-input">{{ form.brandName }}</text>
<uni-icons type="right" color="#000000" size="16"></uni-icons>
</view>
</picker>
</view>
</view>
<view class="qn-form-item qn-form-item">
<view class="label">
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
<text class="label__text">纸品名称</text>
</view>
<view class="value">
<qn-easyinput :maxlength="20" v-model="form.paperName" :inputBorder="false" text="right" placeholder="请输入纸品名称"></qn-easyinput>
</view>
</view>
<view class="qn-form-item qn-form-item">
<view class="label">
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
<text class="label__text">克重(g)</text>
</view>
<view class="value">
<picker :value="form.gramWeightIndex" @change="gramWeightChange" :range="weightList">
<view>
<text class="uni-input">{{ form.gramWeight }}</text>
<uni-icons type="right" color="#000000" size="16"></uni-icons>
</view>
</picker>
</view>
</view>
<view class="qn-form-item-gg">
<view class="label">
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
<text class="label__text">规格(mm)</text>
</view>
<view class="value">
<view class="value">
<radio-group>
<label v-for="(ritem, rindex) in radioGroupList" :key="rindex" @tap="specificationTap(ritem, rindex)">
<radio :checked="rindex === 0" style="transform: scale(0.7)" />
<text class="uni-input">{{ ritem.name }}</text>
</label>
</radio-group>
</view>
<view class="input-row">
<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="form.width" placeholder="请输入"></uni-easyinput></view>
<view class="symbol">x</view>
<view class="">
<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="form.length" placeholder="请输入"></uni-easyinput>
</view>
</view>
</view>
</view>
<view class="qn-form-item qn-form-item">
<view class="label">
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
<text class="label__text">数量(张)</text>
</view>
<view class="value">
<view class="value">
<qn-easyinput :maxlength="20" type="number" v-model="form.quantity" :inputBorder="false" text="right" placeholder="请输入数量"></qn-easyinput>
</view>
</view>
</view>
<view class="qn-form-item qn-form-item">
<view class="label"><text class="label__text">交货时间</text></view>
<view class="value">
<qn-datetime-picker
v-model="form.deliveryDay"
type="datetime"
:border="false"
placeholder="交货时间"
@change="deliveryTimeChange"
></qn-datetime-picker>
</view>
</view>
<view class="qn-form-item qn-form-item" style="border: none">
<view class="label">
<text class="label__text">交货区域</text>
</view>
<view class="value">
<qn-data-picker
:readonly="hasSelected"
text="right"
:border="false"
class="qn-picker"
placeholder="区域"
popup-title="请选择城市"
:map="{ text: 'name', value: 'id' }"
@change="onAreaChange"
:clear-icon="true"
:localdata="items"
>
<text v-if="form.locDistrictId">
{{ `${form.deliveryProvinceName || ''}/${form.deliveryCityName || ''}/${form.deliveryDistrictName || ''}/${form.deliveryStreetName || ''}` }}
</text>
</qn-data-picker>
</view>
</view>
<uGap></uGap>
<view class="qn-form-item-remark">
<view class="label"><text class="label__text">询价备注</text></view>
<view class="value">
<qn-easyinput
class="paper-price-textArea"
:maxlength="200"
:styles="{ disableColor: '#F7F8FA' }"
v-model="form.remark"
:inputBorder="false"
type="textarea"
placeholder="请输入询价备注"
></qn-easyinput>
</view>
</view>
</view>
<qn-footer fixed height="120rpx">
<view class="button-area">
<view class="button button__submit" @click="addUser"><text class="text" style="color: white">提交询价</text></view>
</view>
</qn-footer>
</view>
</template>
<script>
import { back, uploadImage } from '@/utils/hook.js'
import { getArea } from '@/apis/commonApi.js'
import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue'
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
import qnDatetimePicker from '@/components/qn-datetime-picker/qn-datetime-picker.vue'
import qnFooter from '@/components/qn-footer/qn-footer.vue'
import uGap from '@/components/u-gap/u-gap.vue'
import { createEnquiryOrder, getCategoryList } from '@/apis/forComparisonApi.js'
const validateFields = ['categoryName', 'brandName', 'paperName', 'gramWeight', 'width', 'length', 'quantity']
export default {
components: { qnEasyinput, qnDataPicker, qnDatetimePicker, qnFooter, uGap },
data() {
return {
paperIndex: 0,
categoryNameList: [],
brandNameList: [],
weightList: [],
deliveryTimeList: ['当天到', '明天到'],
radioGroupList: [
{
name: '正度',
width: '787',
length: '1092',
disabled: true
},
{
name: '大度',
width: '889',
length: '1194',
disabled: true
},
{
name: '特规分切',
width: '',
length: '',
disabled: false
}
],
form: {
deliveryArea: '',
deliveryCityId: '',
deliveryCityName: '',
deliveryDay: '',
deliveryDayIndex: 0,
deliveryDistrictId: '',
deliveryDistrictName: '',
deliveryId: '',
deliveryProvinceId: '',
deliveryProvinceName: '',
deliveryStreetId: '',
deliveryStreetName: '',
detailList: [],
offerEnterprise: '',
remark: '',
brandId: '',
brandName: '',
brandIndex: 0,
categoryId: '',
categoryName: '',
categoryIndex: 0,
gramWeight: '',
gramWeightIndex: 0,
length: '1092',
paperName: '',
quantity: '',
width: '787',
productImg: ''
},
searchList: [],
hasSelected: false,
items: []
}
},
mounted() {
getArea().then((res) => {
if (res) {
this.items = res
}
})
},
onLoad(option) {
this.form.offerEnterprise = option.id
this.form.productImg = option.productImg
this.getCategoryList()
},
methods: {
back,
// 查询纸种列表
getCategoryList() {
const params = {
paperSupplierId: this.$store.state.supplierId
}
getCategoryList(params).then((res) => {
// console.log('纸种列表', res)
if (res) {
this.categoryNameList = res.categoryNameList
this.brandNameList = res.brandNameList
this.weightList = res.weightList
this.form.categoryName = this.categoryNameList[0]
this.form.brandName = this.brandNameList[0]
this.form.gramWeight = this.weightList[0]
}
})
},
// 选择纸种
categoryChange(e) {
// console.log('e.target.value', e.target.value)
let index = e.target.value
this.form.categoryIndex = e.target.value
this.form.categoryName = this.categoryNameList[index]
},
// 选择品牌
brandChange(e) {
let index = e.target.value
this.form.brandIndex = e.target.value
this.form.brandName = this.brandNameList[index]
},
// 克重
gramWeightChange(e) {
let index = e.target.value
this.form.gramWeightIndex = e.target.value
this.form.gramWeight = this.weightList[index]
},
// 规格切换
specificationTap(item, index) {
this.form.width = item.width
this.form.length = item.length
},
// 交货时间
deliveryTimeChange(datetime) {
if (datetime.length == 11) {
this.$nextTick(() => {
this.form.deliveryDay = datetime + '23:59:59'
})
}
},
onAreaChange(e) {
if (e.detail.value && e.detail.value.length > 0) {
const [province, city, district, street] = e.detail.value
this.form.deliveryProvinceId = province.value
this.form.deliveryProvinceName = province.text
this.form.deliveryCityId = city.value
this.form.deliveryCityName = city.text
this.form.deliveryDistrictId = district.value
this.form.deliveryDistrictName = district.text
this.form.deliveryStreetId = street.value
this.form.deliveryStreetName = street.text
this.form.deliveryArea = province.text + city.text + district.text + street.text
} else {
this.form.deliveryProvinceId = null
this.form.deliveryProvinceName = null
this.form.deliveryCityId = null
this.form.deliveryCityName = null
this.form.deliveryDistrictId = null
this.form.deliveryDistrictName = null
this.form.deliveryStreetId = null
this.form.deliveryStreetName = null
this.form.deliveryArea = null
}
},
selectedImage(type) {
uploadImage()
.then((urls) => {
if (urls) {
this.form[type] = urls[0]
}
})
.catch((e) => {
uni.showToast({
title: '上传失败',
icon: 'fail'
})
})
},
showImage() {
uni.previewImage({
urls: [this.form.businessLicenseImg]
})
},
addUser() {
for (let validateField of validateFields) {
if (this.form[validateField] === null || this.form[validateField] === '') {
uni.showToast({
title: '请完善信息',
icon: 'none'
})
return
}
}
const params = {
deliveryArea: this.form.deliveryArea,
deliveryCityId: this.form.deliveryCityId,
deliveryCityName: this.form.deliveryCityName,
deliveryDay: this.form.deliveryDay,
deliveryDistrictId: this.form.deliveryDistrictId,
deliveryDistrictName: this.form.deliveryDistrictName,
deliveryId: this.form.deliveryId,
deliveryProvinceId: this.form.deliveryProvinceId,
deliveryProvinceName: this.form.deliveryProvinceName,
deliveryStreetId: this.form.deliveryStreetId,
deliveryStreetName: this.form.deliveryStreetName,
detailList: [
{
brandId: this.form.brandId,
brandName: this.form.brandName,
categoryId: this.form.categoryId,
categoryName: this.form.categoryName,
gramWeight: this.form.gramWeight,
length: this.form.length,
paperName: this.form.paperName,
quantity: this.form.quantity,
remark: this.form.remark,
width: this.form.width
}
],
offerEnterprise: this.form.offerEnterprise,
remark: this.form.remark,
enterpriseId: this.$store.state.companyInfo.id,
productImg: this.form.productImg,
userId: this.$store.state.userInfo.userId
}
createEnquiryOrder(params).then((res) => {
if (res) {
uni.showToast({
title: '添加成功',
icon: 'success'
})
setTimeout(() => {
back()
}, 1000)
}
})
},
/**
* @param {Object} day '昨天：', this.getDay(-1, 7200000) '今天：', this.getDay(0, 3600000) '明天：', this.getDay(1, 3600000)
* @param {Object} hours
* 获取当前时间的前一天 后一天 一周 或者是当前时间的几个小时
*/
getDay(day, hours) {
let today = new Date()
let targetday = today.getTime() + 1000 * 60 * 60 * 24 * day + hours
today.setTime(targetday)
let tYear = today.getFullYear()
let tMonth = today.getMonth()
let tDate = today.getDate()
tMonth = this.doHandleMonth(tMonth + 1)
tDate = this.doHandleMonth(tDate)
return tYear + '-' + tMonth + '-' + tDate + ' ' + '23:59:59'
},
doHandleMonth(month) {
let m = month
if (month.toString().length === 1) {
m = '0' + month
}
return m
}
}
}
</script>
<style lang="scss">
.content {
width: 750rpx;
display: flex;
flex-direction: column;
background-color: #f7f8fa;
}
.hint-box {
padding: 0rpx 32rpx;
height: 76rpx;
line-height: 76rpx;
background: #e5f1ff;
font-size: 30rpx;
color: #007aff;
letter-spacing: 0;
font-weight: 400;
}
.uni-input {
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
text-align: right;
font-weight: 400;
padding-right: 16rpx;
}
.qn-form-item-remark {
width: 750rpx;
padding: 28rpx 32rpx 10rpx 32rpx;
background-color: #fff;
.label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-right: 20rpx;
.label__text {
font-size: 28rpx;
color: #000000;
}
}
.value {
padding: 16rpx 0rpx;
}
.paper-price-textArea {
background: #f7f8fa;
border-radius: 20rpx;
padding: 10rpx;
height: 155rpx;
}
}
.qn-form-item-gg {
width: 750rpx;
padding: 24rpx 32rpx;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
.label {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-right: 20rpx;
.label__text {
font-size: 28rpx;
color: #000000;
}
}
.value {
flex-grow: 1;
flex-shrink: 1;
text-align: right;
}
.input-row {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding-top: 20rpx;
.easyinput {
height: 64rpx;
width: 160rpx;
background: #f5f5f5;
border-radius: 8rpx;
}
.symbol {
padding: 0rpx 16rpx;
font-size: 32rpx;
color: rgba(0, 0, 0, 0.85);
font-weight: 400;
}
}
}
.qn-form-item {
width: 750rpx;
padding: 0rpx 32rpx;
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
min-height: 80rpx;
.label {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-right: 20rpx;
.label__text {
font-size: 28rpx;
color: #000000;
}
}
.value {
flex-grow: 1;
flex-shrink: 1;
text-align: right;
}
}
.qn-form-item__title {
background-color: #f7f8fa;
padding: 20rpx 32rpx;
border: none;
.title {
font-size: 30rpx;
color: #888888;
}
}
.popup_modal {
width: 750rpx;
height: 600rpx;
background-color: #fff;
border-radius: 10px 10px 0 0;
.popup_modal-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 750rpx;
height: 88rpx;
font-weight: 600;
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
}
.popup_modal-scroll {
width: 750rpx;
height: 600rpx;
.popup_modal-scroll-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 750rpx;
height: 88rpx;
padding: 0rpx 32rpx;
border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
}
}
}
.upload-area {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 10rpx;
margin-bottom: 24rpx;
.idCard {
width: 324rpx;
height: 280rpx;
flex-grow: 0;
flex-shrink: 0;
}
}
.button-area {
width: 750rpx;
padding: 0 32rpx;
display: flex;
flex-direction: row;
align-items: center;
// justify-content: space-between;
.button {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
.text {
font-size: 30rpx;
font-weight: 500;
text-align: center;
}
}
.button__cancel {
width: 270rpx;
height: 88rpx;
border: 2rpx solid #979797;
}
.button__submit {
// width: 400rpx;
width: 100%;
height: 88rpx;
background: #007aff;
}
}
</style>