hly
/
aluminium-trading-uniapp-240925
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

.

master
chenkun 3 months ago
parent
c0aa2d9be7
commit
3fd787a5f1
8 changed files with 883 additions and 605 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -0
      api/api.js
  2. +9
    -4
      components/base/topbar.vue
  3. +2
    -1
      package.json
  4. +4
    -5
      pages/index/clearanceService.vue
  5. +38
    -13
      pages/index/index.vue
  6. +287
    -164
      pages/index/tradingPlatform.vue
  7. +2
    -0
      pages_order/components/address/addressList.vue
  8. +534
    -418
      pages_order/order/offerOrBillLading.vue

+ 7
- 0
api/api.js View File

@ -161,6 +161,13 @@ const config = {
method: 'GET',
limit: 500,
},
// 获取banner列表
bannerList: {
url: '/index/bannerList',
method: 'POST',
limit: 500,
},
}


+ 9
- 4
components/base/topbar.vue View File

@ -15,6 +15,8 @@
</template>
<script>
import {mapGetters} from 'vuex'
export default {
props: {
showRight: {
@ -22,14 +24,17 @@ export default {
type: String,
}
},
mounted() {
console.log(this.$store.state, "this.$store.state")
},
data() {
return {
}
}
,
},
computed: {
...mapGetters(['userShop']),
},
methods: {
// 切换身份
switchIdentity() {


+ 2
- 1
package.json View File

@ -15,6 +15,7 @@
"license": "ISC",
"dependencies": {
"ali-oss": "^6.21.0",
"dayjs": "^1.11.12"
"dayjs": "^1.11.12",
"echarts": "^5.5.1"
}
}

+ 4
- 5
pages/index/clearanceService.vue View File

@ -6,15 +6,14 @@
<!--内容区域-->
<view class="content">
<view class="bigImg">
<!--换成后端后删除对应的图片-->
<img src="../../static/image/clearanceService.png" alt="" style="width: 100%;height: 100%;">
</view>
<view class="smallImg">
<!--换成后端后删除对应的图片-->
<img src="../../static/image/1.png" alt="" style="width: 100%;height: 100%;">
</view>
<!--<view class="smallImg">-->
<!-- &lt;!&ndash;换成后端后删除对应的图片&ndash;&gt;-->
<!-- <img src="../../static/image/1.png" alt="" style="width: 100%;height: 100%;">-->
<!--</view>-->
<view class="ljsq">
<span @click="applyClearanceService" class="text">
{{ $t('components.applyNow') }}&nbsp;&nbsp;>>


+ 38
- 13
pages/index/index.vue View File

@ -10,7 +10,12 @@
<!--上面第一个-->
<view class="topItem">
<view class="imageFrame">
<img src="../../static/image/index/4.png" style="width:100%;height:100%;">
<uv-swiper
:list="bannerList[0]"
height="320rpx"
keyName="image">
</uv-swiper>
<!--<img src="../../static/image/index/4.png" style="width:100%;height:100%;">-->
</view>
</view>
<!-- 下面三个-->
@ -20,7 +25,7 @@
<view class="left">
<!--<span>Company Profile</span>-->
<span> {{ $t('pages.index.index.companyProfile') }}</span>
<span class="subText"> {{ $t('other.aluminumProducts') }}</span>
<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span>
</view>
<view class="right">
随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
@ -30,10 +35,21 @@
<!-- 第二个-->
<view class="twoItem">
<view class="left">
<img src="../../static/image/index/2.png" style="width:100%;height:100%;">
<uv-swiper
:list="bannerList[1]"
keyName="image"
>
</uv-swiper>
<!--<img src="../../static/image/index/2.png" style="width:100%;height:100%;">-->
</view>
<view class="right">
<img src="../../static/image/index/3.png" style="width:100%;height:100%;">
<uv-swiper
:list="bannerList[2]"
keyName="image"
>
</uv-swiper>
<!--<img src="../../static/image/index/3.png" style="width:100%;height:100%;">-->
</view>
</view>
@ -115,15 +131,13 @@
</template>
<script>
import topbar from '@/components/base/topbar.vue'
import tabber from '@/components/base/tabbar.vue'
import productList from '@/components/user/productList.vue'
import {
mapGetters
} from 'vuex'
import changeLanguage from '@/components/base/changeLanguage.vue'
export default {
import topbar from '@/components/base/topbar.vue'
import tabber from '@/components/base/tabbar.vue'
import productList from '@/components/user/productList.vue'
import {mapGetters} from 'vuex'
import changeLanguage from '@/components/base/changeLanguage.vue'
export default {
components: {
tabber,
topbar,
@ -137,6 +151,7 @@
pageSize: 10,
title: ''
},
bannerList: []
}
},
onShow(){
@ -147,11 +162,19 @@
})
}
this.$store.commit('getUserInfo')
this.getBannerList()
},
computed: {
...mapGetters(['userShop']),
},
methods: {
getBannerList() {
this.$api('bannerList', res => {
this.bannerList = res.result
})
},
goToPage(titleIndex) {
uni.navigateTo({
url: '/pages_order/order/offerOrBillLading?titleIndex=' + titleIndex
@ -223,6 +246,7 @@
font-size: 26rpx;
.subText {
text-align: center;
width: 80%;
background-color: #2e394d;
padding: 0 20rpx;
@ -279,6 +303,7 @@
font-size: 26rpx;
.subText {
text-align: center;
background-color: #2e394d;
width: 80%;
padding: 0 20rpx;


+ 287
- 164
pages/index/tradingPlatform.vue View File

@ -1,181 +1,304 @@
<template>
<view class="trading-platform">
<view class="trading-platform">
<topbar showRight="0"></topbar>
<topbar showRight="0"></topbar>
<view class="frame">
<!--顶部栏-->
<view class="frame">
<!--顶部栏-->
<!--折线图-->
<view class="chart">
折线图
</view>
<!--折线图-->
<div ref="chartContainer" class="chart" style="width: 100%; height: 300px;">
<!-- 供应商 -->
<view class="supplier" v-if="userShop">
</div>
<view style="" class="purchaser-title">
<span class="active"> {{ $t('other.orderList') }}</span>
</view>
<!-- 供应商 -->
<view v-if="userShop" class="supplier">
<view class="supplierList">
<orderList :list="list" />
</view>
</view>
<view class="purchaser-title" style="">
<span class="active"> {{ $t('other.orderList') }}</span>
</view>
<!-- 采购商 -->
<view class="purchaser" v-else>
<view class="supplierList">
<orderList :list="list"/>
</view>
</view>
<!-- 采购商 -->
<view v-else class="purchaser">
<!--切换现货/期货-->
<view style="" class="purchaser-title">
<span @click="actionIndexChange(index)" v-for="(item, index) in type" :class="actionIndex == index ? 'active' : 'noactive'">{{ item.name }}</span>
</view>
<view class="productList">
<productList :list="list" />
</view>
</view>
</view>
<tabber select="1" />
</view>
<view class="purchaser-title" style="">
<span v-for="(item, index) in type" :class="actionIndex == index ? 'active' : 'noactive'"
@click="actionIndexChange(index)">{{ item.name }}</span>
</view>
<view class="productList">
<productList :list="list"/>
</view>
</view>
</view>
<tabber select="1"/>
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import topbar from "@/components/base/topbar.vue";
import {
mapGetters
} from 'vuex'
import ProductList from "@/components/user/productList.vue";
import OrderList from "@/pages_order/components/order/orderList.vue";
import mixinList from '@/mixins/list.js'
export default {
mixins : [mixinList],
components: {
OrderList,
ProductList,
topbar,
tabber,
},
computed: {
...mapGetters(['userShop']),
},
data() {
return {
actionIndex: 0,
mixinsListApi : 'getMyProductlist',
type : [
{
name : this.$t('other.spotTrading')
},
{
name : this.$t('other.futuresTrading')
},
],
}
},
onLoad() {
if(this.userShop){
// 现货/期货列表
this.mixinsListApi = 'productList'
}else{
// 交易平台挂单列表
this.mixinsListApi = 'productlist'
this.queryParams.productType = this.actionIndex
}
},
methods: {
// 切换tab
actionIndexChange(index) {
// index为0时切换到现货交易，index为1时切换到期货交易
this.actionIndex = index;
this.queryParams.productType = this.actionIndex
this.getData()
},
}
}
import tabber from '@/components/base/tabbar.vue'
import topbar from "@/components/base/topbar.vue";
import {mapGetters} from 'vuex'
import ProductList from "@/components/user/productList.vue";
import OrderList from "@/pages_order/components/order/orderList.vue";
import mixinList from '@/mixins/list.js'
import * as echarts from 'echarts';
export default {
mixins: [mixinList],
components: {
OrderList,
ProductList,
topbar,
tabber,
},
computed: {
...mapGetters(['userShop']),
},
data() {
return {
actionIndex: 0,
mixinsListApi: 'getMyProductlist',
type: [
{
name: this.$t('other.spotTrading')
},
{
name: this.$t('other.futuresTrading')
},
],
chartData: [
// {date: "08/16", value: 10},
// {date: "08/17", value: 15},
// {date: "08/18", value: 45},
// {date: "08/19", value: 20},
// {date: "08/20", value: 18},
// {date: "08/21", value: 10},
// {date: "08/22", value: 15},
// {date: "08/23", value: 25},
// {date: "08/24", value: 35},
// {date: "08/25", value: 30},
// {date: "08/26", value: 25},
// {date: "08/27", value: 25},
],
unit: '元/吨',
}
},
onLoad() {
if (this.userShop) {
// 现货/期货列表
this.mixinsListApi = 'productList'
} else {
// 交易平台挂单列表
this.mixinsListApi = 'productlist'
this.queryParams.productType = this.actionIndex
}
},
mounted() {
// this.getAlPrice()
// setTimeout(() => {
// this.initChart();
// })
},
onShow() {
this.getAlPrice()
},
methods: {
getAlPrice() {
this.$api('getAlPrice', res => {
this.unit = res.result.unit
this.chartData = res.result.data
this.initChart(res.result.data)
})
},
initChart(data) {
var that = this;
const chartContainer = this.$refs.chartContainer;
if (!chartContainer) {
console.error("Chart container not found");
return;
}
const myChart = echarts.init(chartContainer);
// 提取日期和数值
const dates = data.map(item => item.date);
const values = data.map(item => item.value);
// 配置 ECharts
const option = {
backgroundColor: '#1B263B',
title: {
text: `${'铝均价' + data[0].value}`,
right: '10%',
top: '10%',
textStyle: {
color: '#fff',
fontSize: 14
}
},
tooltip: {
trigger: 'axis',
formatter: '{c0}',
backgroundColor: '#3A506B',
textStyle: {
color: '#fff'
}
},
grid: {
left: '10%',
right: '10%',
bottom: '20%'
},
xAxis: {
type: 'category',
data: dates,
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff'
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff',
formatter: function (value) {
return value;
}
}
},
series: [{
name: '长江',
type: 'line',
data: values,
smooth: true,
symbol: 'circle',
symbolSize: 8,
itemStyle: {
color: '#4ECDC4'
},
lineStyle: {
color: '#4ECDC4',
width: 2
},
areaStyle: {
color: 'rgba(78, 205, 196, 0.2)'
},
}]
};
myChart.setOption(option);
},
// 切换tab
actionIndexChange(index) {
// index为0时切换到现货交易，index为1时切换到期货交易
this.actionIndex = index;
this.queryParams.productType = this.actionIndex
this.getData()
},
}
}
</script>
<style scoped lang="scss">
.trading-platform {
background-image: url('../../static/image/index/1.png');
.frame {
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 120rpx - 120rpx);
.chart {
height: 30%;
}
.supplier {
height: 70%;
padding: 20rpx 20rpx;
background-image: url('../../static/image/index/1.png');
color: #FFF;
font-size: 32rpx;
.supplierList {
margin-top: 20rpx;
height: 92%;
overflow: auto;
}
.purchaser-title {
height: 8%;
.active {
text-decoration: underline;
width: 80rpx;
margin: 20rpx 20rpx 20rpx 20rpx;
padding: 10rpx 20rpx;
}
.noactive {
width: 80rpx;
margin: 20rpx 20rpx 20rpx 20rpx;
padding: 10rpx 20rpx;
}
}
}
.purchaser {
height: 60%;
padding: 20rpx 0;
color: #FFF;
font-size: 32rpx;
.purchaser-title {
.active {
text-decoration: underline;
width: 80rpx;
margin: 20rpx 20rpx 20rpx 20rpx;
padding: 10rpx 20rpx;
}
.noactive {
width: 80rpx;
margin: 20rpx 20rpx 20rpx 20rpx;
padding: 10rpx 20rpx;
}
}
.productList {
margin-top: 20rpx;
height: 60vh;
overflow: auto;
}
}
}
}
.trading-platform {
background-image: url('../../static/image/index/1.png');
.frame {
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 120rpx - 120rpx);
.chart {
height: 300px !important;
background-color: #1B263B; /* 背景颜色 */
}
.supplier {
height: 70%;
padding: 20rpx 20rpx;
background-image: url('../../static/image/index/1.png');
color: #FFF;
font-size: 32rpx;
.supplierList {
margin-top: 20rpx;
height: 92%;
overflow: auto;
}
.purchaser-title {
height: 8%;
.active {
text-decoration: underline;
width: 80rpx;
margin: 20rpx 20rpx 20rpx 20rpx;
padding: 10rpx 20rpx;
}
.noactive {
width: 80rpx;
margin: 20rpx 20rpx 20rpx 20rpx;
padding: 10rpx 20rpx;
}
}
}
.purchaser {
height: 60%;
padding: 20rpx 0;
color: #FFF;
font-size: 32rpx;
.purchaser-title {
.active {
text-decoration: underline;
width: 80rpx;
margin: 20rpx 20rpx 20rpx 20rpx;
padding: 10rpx 20rpx;
}
.noactive {
width: 80rpx;
margin: 20rpx 20rpx 20rpx 20rpx;
padding: 10rpx 20rpx;
}
}
.productList {
margin-top: 20rpx;
height: 60vh;
overflow: auto;
}
}
}
}
</style>

+ 2
- 0
pages_order/components/address/addressList.vue View File

@ -86,12 +86,14 @@ export default {
total : 0,
}
},
methods: {
//获取地址列表
getAddressList() {
return new Promise((success, fail) => {
this.$api('addressList', this.queryParams, res => {
if (res.code == 200) {
console.log("res.result.records", res.result.records)
this.addressList = res.result.records || [];
this.total = res.result.total || 0;
this.addressList.forEach(n => { //筛选默认地址


+ 534
- 418
pages_order/order/offerOrBillLading.vue View File

@ -1,438 +1,554 @@
<template>
<view class="page">
<view class="page">
<navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack" />
<navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack"/>
<view class="frame">
<view class="title">
<view class="frame">
<view class="title">
<span
style="width: 10rpx;height: 40rpx;background-color: #1f1c39;border-radius: 10rpx;overflow: hidden;"></span>
<span>{{ $t('other.aluminumProducts') }}</span>
</view>
<view class="basic-info">
<!--供应商名称-->
<view class="item" v-if="titleIndex == 1">
<view>{{ $t('other.supplierName') }}</view>
<view>华南铝业有限公司</view>
</view>
<!--商品规格-->
<view class="item">
<view>{{ $t('components.productSpe') }}</view>
<view>铝制品(Al>96%)</view>
</view>
<!--提货地点-->
<view class="currentRegion">
<view>{{ $t('components.pickupLocation') }}</view>
<view @click.stop="selectAddr">
<input class="input" disabled v-model="form.currentRegion"
:placeholder=" $t('components.selectRegion')">
</input>
<view class="orientation">
<img src="../../static/image/address/selectIcon.png"
style="width:30rpx;height: 30rpx;margin:5rpx 5rpx 5rpx 5rpx;">
</view>
</view>
</view>
<!--详细地址-->
<view class="item">
<view>{{ $t('components.detailedAddress') }}</view>
<view>
<input v-model="form.address" :placeholder="$t('components.enterDetailedAddress') "
clearable></input>
</view>
</view>
<!--交货日期-->
<view class="delivery-date">
<view>{{ $t('components.deliveryDate') }}</view>
<view class="value">
<view class="dateTimeCls">
<view class="date" @click="startDateOpen">
{{ form.deliveryDate }}
<uv-datetime-picker ref="startDateRef" v-model="form.deliveryDate" mode="date"
@confirm="startDateChange"></uv-datetime-picker>
</view>
<view class="img">
>
</view>
</view>
</view>
</view>
<!--暂定数量-->
<view class="tentativeQuantity">
<view class="key">{{ $t('other.tentativeQuantity') }}</view>
<view class="value">
<uv-number-box v-model="form.tentativeQuantity"></uv-number-box>
</view>
</view>
<!--单价-->
<view class="item">
<view>{{ $t('components.unitPrice') }}</view>
<view>
<input clearable v-model="form.price"></input>
</view>
</view>
<!--提交报价和提交审核-->
<view class="btns">
style="width: 10rpx;height: 40rpx;background-color: #1f1c39;border-radius: 10rpx;overflow: hidden;"></span>
<span>{{ $t('other.aluminumProducts') }}</span>
</view>
<view class="basic-info">
<!--供应商名称-->
<view v-if="titleIndex == 1" class="item">
<view>{{ $t('other.supplierName') }}</view>
<view>华南铝业有限公司</view>
</view>
<!--商品规格-->
<view class="item">
<view>{{ $t('components.productSpe') }}</view>
<view>铝制品(Al>96%)</view>
</view>
<view class="addressA" @click="openAddress">
<view class="title">{{ $t('components.shippingAddress') }}</view>
<view class="address" style="width: 70%">
<image mode="" src="/static/image/address/selectIcon.png"></image>
<view class="">
{{ address.name }}
</view>
<view class="">
{{ address.addressDetail }}
</view>
<view class="icon">
<uv-icon name="arrow-right" size="30rpx"></uv-icon>
</view>
</view>
</view>
<!--提货地点-->
<!--<view class="currentRegion">-->
<!-- <view>{{ $t('components.pickupLocation') }}</view>-->
<!-- <view @click.stop="selectAddr">-->
<!-- <input class="input" disabled v-model="form.currentRegion"-->
<!-- :placeholder=" $t('components.selectRegion')">-->
<!-- </input>-->
<!-- <view class="orientation">-->
<!-- <img src="../../static/image/address/selectIcon.png"-->
<!-- style="width:30rpx;height: 30rpx;margin:5rpx 5rpx 5rpx 5rpx;">-->
<!-- </view>-->
<!-- </view>-->
<!--</view>-->
<!--详细地址-->
<!--<view class="item">-->
<!-- <view>{{ $t('components.detailedAddress') }}</view>-->
<!-- <view>-->
<!-- <input v-model="form.address" :placeholder="$t('components.enterDetailedAddress') "-->
<!-- clearable></input>-->
<!-- </view>-->
<!--</view>-->
<!--交货日期-->
<view class="delivery-date">
<view>{{ $t('components.deliveryDate') }}</view>
<view class="value">
<view class="dateTimeCls">
<view class="date" @click="startDateOpen">
{{ form.transactionTime }}
<uv-datetime-picker ref="startDateRef" v-model="form.transactionTime" mode="date"
@confirm="startDateChange"></uv-datetime-picker>
</view>
<view class="img">
>
</view>
</view>
</view>
</view>
<!--暂定数量-->
<view class="tentativeQuantity">
<view class="key">{{ $t('other.tentativeQuantity') }}</view>
<view class="value">
<uv-number-box v-model="form.num"></uv-number-box>
</view>
</view>
<!--单价-->
<view class="item">
<view>{{ $t('components.unitPrice') }}</view>
<view>
<input v-model="form.price" clearable></input>
</view>
</view>
<!--提交报价和提交审核-->
<view class="btns">
<span @click="confirmBtn" class="ljxd">
{{ titleIndex == 0 ? $t('other.submitQuotation') : $t('other.submitReview') }}
</span>
<span @click="contactUs" class="lxwm">
<span class="lxwm" @click="contactUs">
{{ $t('components.contactUs') }}
</span>
<span class="tip">{{ $t('components.contactTip') }}</span>
</view>
<span class="tip">{{ $t('components.contactTip') }}</span>
</view>
</view>
</view>
</view>
</view>
<!-- 联系客服弹框 -->
<customerServicePopup ref="customerServicePopup" />
<!-- 联系客服弹框 -->
<customerServicePopup ref="customerServicePopup"/>
</view>
<!-- 地址选择弹框 -->
<uv-popup ref="addressPopup" :round="30">
<addressList ref="addressList" height="60vh" @select="selectAddress"/>
</uv-popup>
</view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";
import customerServicePopup from "@/components/config/customerServicePopup.vue";
import Position from "@/utils/position";
import dayjs from "dayjs";
export default {
name: "offer",
components: {
customerServicePopup,
tabber,
topbar
},
onLoad(options) {
this.titleIndex = options.titleIndex;
},
data() {
return {
titleIndex: 0,
titleList: [
// 0 供应商报价
this.$t('pages.index.index.supplierQuotation'),
this.$t('pages.index.index.supplierBillLading')
],
form: {
address: "",
longitude: "",
latitude: "",
deliveryDate: dayjs(new Date()).format("YYYY-MM-DD"),
}
}
},
methods: {
// 提交报价/提交审核
confirmBtn() {
console.log(this.form);
},
startDateChange(val) {
this.$nextTick(() => {
this.form.deliveryDate = dayjs(val.value).format("YYYY-MM-DD")
});
},
startDateOpen() {
this.$refs.startDateRef.open();
},
// 联系我们
contactUs() {
this.$refs.customerServicePopup.open()
},
//地图上选择地址
selectAddr() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
this.setAddress(success)
})
})
Position.getLocationDetail(res => {
console.log(res);
this.form.address = res
})
},
},
}
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";
import customerServicePopup from "@/components/config/customerServicePopup.vue";
import Position from "@/utils/position";
import dayjs from "dayjs";
import AddressList from "@/pages_order/components/address/addressList.vue";
export default {
name: "offer",
components: {
AddressList,
customerServicePopup,
tabber,
topbar
},
onLoad(options) {
this.titleIndex = options.titleIndex;
},
data() {
return {
titleIndex: 0,
titleList: [
// 0 供应商报价
this.$t('pages.index.index.supplierQuotation'),
this.$t('pages.index.index.supplierBillLading')
],
form: {
"addressId": "",
"num": 0,
"price": 0,
"transactionTime": ""
},
address: {
name: '请选择地址',
addressDetail: '',
},
addressTotal: 0,
}
},
onShow() {
this.getAddressListA()
},
methods: {
//获取地址列表
getAddressListA() {
this.$refs.addressList.getAddressList()
},
// 提交报价/提交审核
confirmBtn() {
//TODO
this.form.addressId = this.address.id
this.$api('addProduct', this.form, res => {
if (res.code == 200) {
uni.showToast({
title: '提交成功',
icon: 'none'
})
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/index'
})
}, 1500)
}
})
},
openAddress() {
// if (this.addressTotal == 0) {
// this.$refs.popup.close()
// return uni.navigateTo({
// url: '/pages_order/mine/address?type=back'
// })
// }
this.$refs.addressPopup.open('bottom')
// this.getAddressList()
},
// 选择地址
selectAddress(e) {
this.address = e
this.$refs.addressPopup.close()
},
startDateChange(val) {
this.$nextTick(() => {
this.form.transactionTime = dayjs(val.value).format("YYYY-MM-DD")
});
},
startDateOpen() {
this.$refs.startDateRef.open();
},
// 联系我们
contactUs() {
this.$refs.customerServicePopup.open()
},
//地图上选择地址
selectAddr() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
this.setAddress(success)
})
})
Position.getLocationDetail(res => {
console.log(res);
this.form.address = res
})
},
},
}
</script>
<style scoped lang="scss">
.page {
height: 100vh;
.frame {
background-color: #FFF;
.title {
display: flex;
font-size: 30rpx;
font-weight: 700;
padding: 0rpx 0 0rpx 20rpx;
margin: 20rpx 0 0 0;
>span:nth-of-type(1) {
margin: 4rpx 0 0 8rpx;
background-color: #FFF;
}
>span:nth-of-type(2) {
margin: 0 0 0 8rpx;
background-color: #FFF;
}
}
.basic-info {
display: flex;
flex-direction: column;
gap: 10rpx;
//margin-top: 20rpx;
padding: 20rpx 20rpx 20rpx 20rpx;
.delivery-date {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
>view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
.dateTimeCls {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 80%;
//border: 1px solid #b0b2b3;
padding: 5rpx;
border-radius: 20rpx;
.date {
font-size: 30rpx;
display: flex;
align-items: center;
width: 80%;
height: 100%;
color: #000;
}
.img {
display: flex;
justify-content: center;
align-items: center;
//margin-left: 50rpx;
width: 20%;
//height: 100%;
}
}
}
}
.tentativeQuantity {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
.key {
width: 30%;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
}
}
.Tip {
display: flex;
align-items: center;
justify-content: center;
.span {
color: #999;
font-size: 24rpx;
}
}
.btns {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20rpx;
.ljxd {
display: flex;
align-items: center;
justify-content: center;
width: 500rpx;
height: 70rpx;
border-radius: 40rpx;
color: #FFF;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: $uni-color;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.lxwm {
display: flex;
align-items: center;
justify-content: center;
width: 500rpx;
height: 70rpx;
border-radius: 40rpx;
color: #000000;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #f1f1f1;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.tip {
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #999;
//width: 500rpx;
}
}
.item {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
>view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
>view:nth-of-type(2) {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
input {
background-color: #FFF;
font-size: 28rpx;
padding: 16rpx 8rpx 16rpx 15rpx;
}
}
}
.performanceBond {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
.key {
width: 30%;
// font-weight: 700;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
input {
background-color: #FFF;
font-size: 28rpx;
padding: 16rpx 8rpx 16rpx 15rpx;
}
}
}
.currentRegion {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
>view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
>view:nth-of-type(2) {
width: 70%;
padding: 0 20rpx 0 0;
display: flex;
.input {
background-color: #f5f5f5;
// color: #a4a4a4;
font-size: 28rpx;
padding: 8rpx 8rpx 8rpx 15rpx;
width: 350rpx;
}
.orientation {
display: flex;
padding: 10rpx 10rpx 10rpx 20rpx;
font-size: 30rpx;
color: #FBAB32;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
}
}
}
}
.page {
height: 100vh;
.frame {
background-color: #FFF;
.title {
display: flex;
font-size: 30rpx;
font-weight: 700;
padding: 0rpx 0 0rpx 20rpx;
margin: 20rpx 0 0 0;
> span:nth-of-type(1) {
margin: 4rpx 0 0 8rpx;
background-color: #FFF;
}
> span:nth-of-type(2) {
margin: 0 0 0 8rpx;
background-color: #FFF;
}
}
.basic-info {
display: flex;
flex-direction: column;
gap: 10rpx;
//margin-top: 20rpx;
padding: 20rpx 20rpx 20rpx 20rpx;
.addressA {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
//padding: 10rpx 0 0 20rpx;
.title {
display: flex;
align-items: center;
justify-content: flex-start;
font-weight: 400;
width: 30%;
}
.address {
width: 70%;
display: flex;
padding: 20rpx;
background-color: #fff;
image {
width: 30rpx;
height: 30rpx;
margin: 10rpx;
}
view {
//margin: 20rpx;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.icon {
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
}
}
}
.delivery-date {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
> view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
.dateTimeCls {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 80%;
//border: 1px solid #b0b2b3;
padding: 5rpx;
border-radius: 20rpx;
.date {
font-size: 30rpx;
display: flex;
align-items: center;
width: 80%;
height: 100%;
color: #000;
}
.img {
display: flex;
justify-content: center;
align-items: center;
//margin-left: 50rpx;
width: 20%;
//height: 100%;
}
}
}
}
.tentativeQuantity {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
.key {
width: 30%;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
}
}
.Tip {
display: flex;
align-items: center;
justify-content: center;
.span {
color: #999;
font-size: 24rpx;
}
}
.btns {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20rpx;
.ljxd {
display: flex;
align-items: center;
justify-content: center;
width: 500rpx;
height: 70rpx;
border-radius: 40rpx;
color: #FFF;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: $uni-color;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.lxwm {
display: flex;
align-items: center;
justify-content: center;
width: 500rpx;
height: 70rpx;
border-radius: 40rpx;
color: #000000;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #f1f1f1;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.tip {
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #999;
//width: 500rpx;
}
}
.item {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
> view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
> view:nth-of-type(2) {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
input {
background-color: #FFF;
font-size: 28rpx;
padding: 16rpx 8rpx 16rpx 15rpx;
}
}
}
.performanceBond {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
.key {
width: 30%;
// font-weight: 700;
}
.value {
width: 70%;
border-radius: 10rpx;
overflow: hidden;
input {
background-color: #FFF;
font-size: 28rpx;
padding: 16rpx 8rpx 16rpx 15rpx;
}
}
}
.currentRegion {
display: flex;
align-items: center;
background-color: #FFF;
height: 80rpx;
// margin: 10rpx 0 0 0;
padding: 10rpx 0 0 20rpx;
> view:nth-of-type(1) {
width: 30%;
// font-weight: 700;
}
> view:nth-of-type(2) {
width: 70%;
padding: 0 20rpx 0 0;
display: flex;
.input {
background-color: #f5f5f5;
// color: #a4a4a4;
font-size: 28rpx;
padding: 8rpx 8rpx 8rpx 15rpx;
width: 350rpx;
}
.orientation {
display: flex;
padding: 10rpx 10rpx 10rpx 20rpx;
font-size: 30rpx;
color: #FBAB32;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save