@ -1,147 +1,143 @@ | |||
<template> | |||
<view class="list"> | |||
<view class="item" | |||
v-for="(item, index) in 10" | |||
@click="immediatePurchase(item)" | |||
:key="index"> | |||
<image | |||
class="image" | |||
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image> | |||
<view class="info"> | |||
<view class="title"> | |||
{{ $t('other.aluminumProducts') }} | |||
</view> | |||
<view class="price"> | |||
<text>¥58</text> | |||
{{ $t('other.unitPrice2') }} | |||
</view> | |||
<!--<view class="favorable">--> | |||
<!-- <view class="t">--> | |||
<!-- 限时优惠--> | |||
<!-- </view>--> | |||
<!-- <view class="p">--> | |||
<!-- ¥48--> | |||
<!-- </view>--> | |||
<!--</view>--> | |||
<view class="num"> | |||
最多批发*快速下单 | |||
</view> | |||
</view> | |||
<view class="btn"> | |||
<view class="change"> | |||
{{ $t('other.immediatePurchase') }} | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="list"> | |||
<view class="item" v-for="(item, index) in list" @click="immediatePurchase(item)" :key="index"> | |||
<image class="image" :src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" mode=""></image> | |||
<view class="info"> | |||
<view class="title"> | |||
{{ $t('other.aluminumProducts') }} | |||
</view> | |||
<view class="price"> | |||
<text>¥{{ item.price }}</text> | |||
{{ $t('components.unitPrice2') }} | |||
</view> | |||
<!--<view class="favorable">--> | |||
<!-- <view class="t">--> | |||
<!-- 限时优惠--> | |||
<!-- </view>--> | |||
<!-- <view class="p">--> | |||
<!-- ¥48--> | |||
<!-- </view>--> | |||
<!--</view>--> | |||
<view class="num"> | |||
最多批发*快速下单 | |||
</view> | |||
</view> | |||
<view class="btn"> | |||
<view class="change"> | |||
{{ $t('components.immediatePurchase') }} | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
name: "productList", | |||
data() { | |||
return {}; | |||
}, | |||
methods: { | |||
// 立即购买 | |||
immediatePurchase(item) { | |||
console.log("====") | |||
var itemStr = encodeURIComponent(JSON.stringify(item)); | |||
uni.navigateTo({ | |||
url: `/pages_order/tradingPlatform/nowOrder?params=${itemStr}`, | |||
}); | |||
} | |||
}, | |||
} | |||
export default { | |||
name: "productList", | |||
props : ['list'], | |||
data() { | |||
return {}; | |||
}, | |||
methods: { | |||
// 立即购买 | |||
immediatePurchase(item) { | |||
console.log("====") | |||
var itemStr = encodeURIComponent(JSON.stringify(item)); | |||
uni.navigateTo({ | |||
url: `/pages_order/tradingPlatform/nowOrder?params=${itemStr}`, | |||
}); | |||
} | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.list { | |||
display: flex; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
.list { | |||
display: flex; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
.item { | |||
position: relative; | |||
width: 300rpx; | |||
padding: 20rpx; | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
margin-top: 20rpx; | |||
.item { | |||
position: relative; | |||
width: 300rpx; | |||
padding: 20rpx; | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
margin-top: 20rpx; | |||
&:nth-child(odd) { | |||
margin-right: 20rpx; | |||
} | |||
&:nth-child(odd) { | |||
margin-right: 20rpx; | |||
} | |||
.image { | |||
width: 300rpx; | |||
height: 250rpx; | |||
border-radius: 20rpx; | |||
} | |||
.image { | |||
width: 300rpx; | |||
height: 250rpx; | |||
border-radius: 20rpx; | |||
} | |||
.info { | |||
font-size: 26rpx; | |||
.info { | |||
font-size: 26rpx; | |||
.title { | |||
font-size: 30rpx; | |||
color: #000; | |||
} | |||
.title { | |||
font-size: 30rpx; | |||
color: #000; | |||
} | |||
.price { | |||
color: #D03F25; | |||
margin-top: 6rpx; | |||
.price { | |||
color: #D03F25; | |||
margin-top: 6rpx; | |||
text { | |||
font-size: 34rpx; | |||
font-weight: 900; | |||
} | |||
} | |||
text { | |||
font-size: 34rpx; | |||
font-weight: 900; | |||
} | |||
} | |||
.favorable { | |||
display: flex; | |||
background-image: url(/static/image/product/favorable.png); | |||
background-size: 100% 100%; | |||
width: fit-content; | |||
padding: 5rpx 10rpx; | |||
font-size: 18rpx; | |||
margin-top: 6rpx; | |||
.favorable { | |||
display: flex; | |||
background-image: url(/static/image/product/favorable.png); | |||
background-size: 100% 100%; | |||
width: fit-content; | |||
padding: 5rpx 10rpx; | |||
font-size: 18rpx; | |||
margin-top: 6rpx; | |||
.p { | |||
color: #fff; | |||
margin-left: 10rpx; | |||
} | |||
} | |||
.p { | |||
color: #fff; | |||
margin-left: 10rpx; | |||
} | |||
} | |||
.num { | |||
margin-top: 6rpx; | |||
font-size: 22rpx; | |||
color: #888; | |||
} | |||
} | |||
.num { | |||
margin-top: 6rpx; | |||
font-size: 22rpx; | |||
color: #888; | |||
} | |||
} | |||
.btn { | |||
position: absolute; | |||
right: 0rpx; | |||
bottom: 0rpx; | |||
padding: 10rpx; | |||
border-radius: 50%; | |||
//background-color: $uni-color; | |||
.btn { | |||
position: absolute; | |||
right: 0rpx; | |||
bottom: 0rpx; | |||
padding: 10rpx; | |||
border-radius: 50%; | |||
//background-color: $uni-color; | |||
.change { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 40rpx; | |||
color: white; | |||
font-size: 22rpx; | |||
//margin: 20rpx 10rpx 0 0; | |||
padding: 10rpx 10rpx; | |||
background: #2b467a; | |||
border: 1px solid #757986; | |||
//margin-top: 20rpx; | |||
//border-radius: 40rpx; | |||
} | |||
} | |||
} | |||
} | |||
.change { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 40rpx; | |||
color: white; | |||
font-size: 22rpx; | |||
//margin: 20rpx 10rpx 0 0; | |||
padding: 10rpx 10rpx; | |||
background: #2b467a; | |||
border: 1px solid #757986; | |||
//margin-top: 20rpx; | |||
//border-radius: 40rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -1,259 +0,0 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar/> | |||
<view class="user"> | |||
<uv-checkbox-group | |||
shape="circle" | |||
v-model="checkboxValue"> | |||
<uv-swipe-action> | |||
<view | |||
v-for="(item, index) in list" | |||
:key="index"> | |||
<view style="margin-top: 20rpx;"></view> | |||
<uv-swipe-action-item | |||
:options="options"> | |||
<view class="item"> | |||
<view class="checkbox"> | |||
<uv-checkbox | |||
:name="item.id" | |||
activeColor="#FA5A0A" | |||
size="40rpx" | |||
icon-size="35rpx" | |||
></uv-checkbox> | |||
</view> | |||
<image | |||
class="image" | |||
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" | |||
mode=""></image> | |||
<view class="info"> | |||
<view class="title"> | |||
<view class=""> | |||
{{ item.title }} | |||
</view> | |||
<view class=""> | |||
<uv-number-box v-model="item.num" | |||
@change="valChange"></uv-number-box> | |||
</view> | |||
</view> | |||
<view class="unit"> | |||
规格:{{ item.unit }} | |||
<uv-icon name="arrow-down"></uv-icon> | |||
</view> | |||
<view class="price"> | |||
¥<text>{{ item.price }}</text>元 | |||
</view> | |||
</view> | |||
</view> | |||
</uv-swipe-action-item> | |||
</view> | |||
</uv-swipe-action> | |||
</uv-checkbox-group> | |||
<view class="action"> | |||
<view class="icon"> | |||
<image src="/static/image/cart/1.png" mode=""></image> | |||
<view class="num"> | |||
{{ checkboxValue.length }} | |||
</view> | |||
</view> | |||
<view class="price"> | |||
<view class="count"> | |||
合计 | |||
<view class=""> | |||
¥<text>{{ totalPrice }}</text> | |||
</view> | |||
</view> | |||
<view class="text"> | |||
共{{ checkboxValue.length }}件,已享受更低优惠 | |||
</view> | |||
</view> | |||
<view class="btn"> | |||
去结算 | |||
</view> | |||
</view> | |||
</view> | |||
<tabber select="3" /> | |||
</view> | |||
</template> | |||
<script> | |||
import tabber from '@/components/base/tabbar.vue' | |||
export default { | |||
components: { | |||
tabber, | |||
}, | |||
data() { | |||
return { | |||
value : 0, | |||
checkboxValue : [], | |||
options: [ | |||
{ | |||
text: '删除', | |||
style: { | |||
backgroundColor: '#FA5A0A' | |||
} | |||
}, | |||
], | |||
list : [ | |||
{ | |||
id : 1, | |||
title : '桌布租赁', | |||
num : 1, | |||
price : 299, | |||
unit : '120*40*75【桌子尺寸】', | |||
}, | |||
{ | |||
id : 2, | |||
title : '桌布租赁', | |||
num : 1, | |||
price : 299, | |||
unit : '120*40*75【桌子尺寸】', | |||
}, | |||
], | |||
} | |||
}, | |||
computed: { | |||
totalPrice(){ | |||
if (!this.checkboxValue.length) { | |||
return 0 | |||
} | |||
let price = 0 | |||
this.list.forEach(n => { | |||
if(this.checkboxValue.includes(n.id)){ | |||
price += n.price * n.num | |||
} | |||
}) | |||
return price | |||
}, | |||
}, | |||
methods: { | |||
valChange(){ | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
padding-bottom: 200rpx; | |||
/deep/ .uv-swipe-action{ | |||
width: 100%; | |||
} | |||
} | |||
.user { | |||
.item{ | |||
background-color: #fff; | |||
display: flex; | |||
padding: 30rpx; | |||
.checkbox{ | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.image{ | |||
width: 200rpx; | |||
height: 200rpx; | |||
border-radius: 20rpx; | |||
} | |||
.info{ | |||
flex: 1; | |||
.title{ | |||
display: flex; | |||
padding: 10rpx 20rpx; | |||
justify-content: space-between; | |||
} | |||
.unit{ | |||
font-size: 24rpx; | |||
padding: 10rpx 20rpx; | |||
color: #717171; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.price{ | |||
color: $uni-color; | |||
font-size: 28rpx; | |||
padding: 10rpx 20rpx; | |||
text{ | |||
font-size: 36rpx; | |||
font-weight: 900; | |||
} | |||
} | |||
} | |||
} | |||
.action{ | |||
width: 700rpx; | |||
position: fixed; | |||
bottom: 220rpx; | |||
left: 25rpx; | |||
background-color: #fff; | |||
height: 100rpx; | |||
border-radius: 50rpx; | |||
box-shadow: 0 0 6rpx 6rpx #00000010; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
overflow: hidden; | |||
.icon{ | |||
position: relative; | |||
width: 80rpx; | |||
height: 80rpx; | |||
margin: 0 20rpx; | |||
image{ | |||
width: 80rpx; | |||
height: 80rpx; | |||
} | |||
.num{ | |||
position: absolute; | |||
right: 10rpx; | |||
top: 0rpx; | |||
background-color: $uni-color; | |||
color: #fff; | |||
font-size: 18rpx; | |||
border-radius: 50%; | |||
height: 30rpx; | |||
width: 30rpx; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
} | |||
.price{ | |||
.count{ | |||
display: flex; | |||
font-size: 26rpx; | |||
align-items: center; | |||
view{ | |||
color: $uni-color; | |||
margin-left: 10rpx; | |||
text{ | |||
font-size: 32rpx; | |||
font-weight: 900; | |||
} | |||
} | |||
} | |||
.text{ | |||
font-size: 20rpx; | |||
color: #717171; | |||
} | |||
} | |||
.btn{ | |||
margin-left: auto; | |||
background-color: $uni-color; | |||
height: 100%; | |||
padding: 0 50rpx; | |||
color: #fff; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
} | |||
} | |||
</style> |
@ -1,181 +0,0 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar/> | |||
<view class="category"> | |||
<uv-vtabs | |||
:chain="chain" | |||
:list="category" | |||
height="1000px" | |||
:barItemBadgeStyle="{right:'20px',top:'12px'}" | |||
@change="change"> | |||
<uv-vtabs-item> | |||
<view class="category-title"> | |||
租赁 | |||
</view> | |||
<view class="list"> | |||
<view class="item" v-for="(item,index) in list" :key="index" | |||
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"> | |||
<view class="item-image"> | |||
<image | |||
:src="item.image" | |||
mode="aspectFill"></image> | |||
</view> | |||
<view class="item-unit"> | |||
<text class="text">{{item.unit}}</text> | |||
</view> | |||
</view> | |||
</view> | |||
</uv-vtabs-item> | |||
</uv-vtabs> | |||
</view> | |||
<tabber select="1" /> | |||
</view> | |||
</template> | |||
<script> | |||
import tabber from '@/components/base/tabbar.vue' | |||
export default { | |||
components: { | |||
tabber, | |||
}, | |||
data() { | |||
return { | |||
category: [ | |||
{ | |||
name : '桌布' | |||
}, | |||
{ | |||
name : '桌布' | |||
}, | |||
{ | |||
name : '桌布' | |||
}, | |||
], | |||
list : [ | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
{ | |||
unit : '100*50*60', | |||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||
}, | |||
], | |||
chain: false, | |||
value: 0 | |||
} | |||
}, | |||
computed: { | |||
list2() { | |||
const _list = this.list[this.value]?.childrens; | |||
return _list ? _list : []; | |||
} | |||
}, | |||
onReady() { | |||
}, | |||
methods: { | |||
change(index) { | |||
console.log('选项改变:', index) | |||
this.value = index; | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.category { | |||
font-size: 30rpx; | |||
color: #333; | |||
min-height: 100vh; | |||
.category-title{ | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 120rpx; | |||
&::before, | |||
&::after { | |||
position: absolute; | |||
top: 50%; | |||
content: ''; | |||
width: 10%; | |||
border-top: 2rpx solid black; | |||
} | |||
&::before { | |||
left: 25%; | |||
} | |||
&::after { | |||
right: 25%; | |||
} | |||
} | |||
.list{ | |||
display: flex; | |||
flex-wrap: wrap; | |||
margin: 0 auto; | |||
width: 490rpx; | |||
.item { | |||
padding: 10rpx 20rpx; | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
margin-bottom: 20rpx; | |||
.item-image { | |||
width: 120rpx; | |||
height: 120rpx; | |||
image{ | |||
height: 100%; | |||
width: 100%; | |||
border-radius: 50%; | |||
} | |||
} | |||
.item-unit { | |||
font-size: 24rpx; | |||
margin-top: 15rpx; | |||
color: #555; | |||
} | |||
} | |||
.gap { | |||
padding: 0 30rpx; | |||
} | |||
} | |||
} | |||
</style> |
@ -1,420 +0,0 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar title="个人中心" /> | |||
<view class="head"> | |||
<view class="headImage"> | |||
<image src="" mode=""></image> | |||
</view> | |||
<view class="info"> | |||
<view class="name"> | |||
倾心. | |||
</view> | |||
<!-- <view class="vip"> | |||
VIP1 | |||
</view> --> | |||
<view class="tips"> | |||
今天是您来的的第32天 | |||
</view> | |||
</view> | |||
<view class="headBtn" @click="headBtn"> | |||
角色切换 | |||
</view> | |||
<view class="setting"> | |||
<uv-icon name="setting" size="40rpx"></uv-icon> | |||
</view> | |||
</view> | |||
<!-- 水洗店 --> | |||
<view class="userShop" v-if="userShop"> | |||
<userShopCommission /> | |||
<view class="userList"> | |||
<view class="title"> | |||
我的用户 | |||
</view> | |||
<view class="list"> | |||
<view class="item" v-for="(item, index) in 20" :key="index"> | |||
<view class="name"> | |||
客户:王生 | |||
</view> | |||
<view class="num"> | |||
剩余水洗布:198 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 酒店 --> | |||
<view class="user" v-else> | |||
<view class="line"> | |||
<view class="item"> | |||
<view class="image"> | |||
<image src="/static/image/center/1.png" mode=""></image> | |||
</view> | |||
<view class=""> | |||
余额¥3000 | |||
</view> | |||
</view> | |||
<view class="item"> | |||
<view class="image"> | |||
<image src="/static/image/center/4.png" mode=""></image> | |||
</view> | |||
<view class=""> | |||
押金¥30000 | |||
</view> | |||
</view> | |||
</view> | |||
<view class="line grid"> | |||
<view class="title"> | |||
常用功能 | |||
</view> | |||
<uv-grid :col="4" :border="false"> | |||
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')"> | |||
<image class="image" src="/static/image/center/7.png" mode=""></image> | |||
<text class="grid-text">地址管理</text> | |||
</uv-grid-item> | |||
<uv-grid-item @click="$utils.redirectTo('/index/order')"> | |||
<image class="image" src="/static/image/center/8.png" mode=""></image> | |||
<text class="grid-text">订单管理</text> | |||
</uv-grid-item> | |||
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)"> | |||
<image class="image" src="/static/image/center/5.png" mode=""></image> | |||
<text class="grid-text">换货</text> | |||
</uv-grid-item> | |||
<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)"> | |||
<image class="image" src="/static/image/center/7.png" mode=""></image> | |||
<text class="grid-text">退货</text> | |||
</uv-grid-item> | |||
</uv-grid> | |||
</view> | |||
<view class="line grid"> | |||
<uv-grid :col="4" :border="false"> | |||
<uv-grid-item @click="contactUs"> | |||
<image class="image" src="/static/image/center/9.png" mode=""></image> | |||
<text class="grid-text">联系客服</text> | |||
</uv-grid-item> | |||
<uv-grid-item> | |||
<image class="image" src="/static/image/center/6.png" mode=""></image> | |||
<text class="grid-text">我的租赁</text> | |||
</uv-grid-item> | |||
<uv-grid-item @click="$utils.redirectTo('/index/cart')"> | |||
<image class="image" src="/static/image/center/7.png" mode=""></image> | |||
<text class="grid-text">租赁车</text> | |||
</uv-grid-item> | |||
<uv-grid-item | |||
@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)"> | |||
<image class="image" src="/static/image/center/7.png" mode=""></image> | |||
<text class="grid-text">申请成为水洗店</text> | |||
</uv-grid-item> | |||
</uv-grid> | |||
</view> | |||
</view> | |||
<!-- 联系客服弹框 --> | |||
<uv-overlay :show="show" @click="show = false"> | |||
<view class="warp"> | |||
<view class="rect" @tap.stop> | |||
<view class="title">联系客服</view> | |||
<view class="center">确定拨打客服电话?</view> | |||
<view class="bottom"> | |||
<view> | |||
<uv-button type="info" shape="circle" text="取消" :custom-style="customStyle1" | |||
@click="cancle"></uv-button> | |||
</view> | |||
<view> | |||
<uv-button type="info" shape="circle" text="确定" :custom-style="customStyle2" | |||
@click="confirm"></uv-button> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</uv-overlay> | |||
<tabber select="4" /> | |||
</view> | |||
</template> | |||
<script> | |||
import tabber from '@/components/base/tabbar.vue' | |||
import { | |||
mapGetters | |||
} from 'vuex' | |||
import userShopCommission from '@/components/userShop/userShopCommission.vue' | |||
export default { | |||
components: { | |||
tabber, | |||
userShopCommission, | |||
}, | |||
computed: { | |||
...mapGetters(['userShop']), | |||
customStyle1() { | |||
return { | |||
height: '60rpx', | |||
background: '#FFF', | |||
color: '#000000', | |||
fontSize: '36rpx', | |||
borderRadius: '40rpx', //圆角 | |||
// nvue中必须是下方的写法 | |||
'border-top-right-radius': '40rpx', | |||
'border-bottom-left-radius': '40rpx', | |||
'border-bottom-right-radius': '40rpx', | |||
'width': '150rpx', | |||
} | |||
}, | |||
customStyle2() { | |||
return { | |||
height: '60rpx', | |||
background: '#fd5100', | |||
color: '#FFF', | |||
fontSize: '34px', | |||
borderRadius: '40rpx', //圆角 | |||
// nvue中必须是下方的写法 | |||
'border-top-right-radius': '40rpx', | |||
'border-bottom-left-radius': '40rpx', | |||
'border-bottom-right-radius': '40rpx', | |||
'width': '150rpx', | |||
} | |||
} | |||
}, | |||
data() { | |||
return { | |||
show: false, | |||
} | |||
}, | |||
methods: { | |||
headBtn() { | |||
let self = this | |||
uni.showModal({ | |||
title: '演示切换角色之后的效果', | |||
success(res) { | |||
if (res.confirm) { | |||
self.$store.state.shop = !self.$store.state.shop | |||
} | |||
} | |||
}) | |||
}, | |||
// 联系客服按钮回调 | |||
contactUs() { | |||
this.show = true | |||
}, | |||
confirm() { | |||
this.show = false | |||
}, | |||
cancle() { | |||
this.show = false | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
.warp { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 100%; | |||
} | |||
.rect { | |||
width: 600rpx; | |||
height: 300rpx; | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
overflow: hidden; | |||
.title { | |||
padding: 10rpx 0 0 15rpx; | |||
background-color: #fd5100; | |||
color: #FFF; | |||
text-align: left; | |||
width: 100%; | |||
height: 18%; | |||
font-size: 36rpx; | |||
} | |||
.center { | |||
height: 40%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 36rpx; | |||
} | |||
.bottom { | |||
display: flex; | |||
justify-content: center; | |||
gap: 50rpx; | |||
} | |||
} | |||
} | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.head { | |||
display: flex; | |||
background-color: #fff; | |||
padding: 40rpx 20rpx; | |||
align-items: center; | |||
position: relative; | |||
.headImage { | |||
width: 120rpx; | |||
height: 120rpx; | |||
background-image: url(/static/image/center/3.png); | |||
background-size: 100% 100%; | |||
overflow: hidden; | |||
border-radius: 50%; | |||
margin-right: 40rpx; | |||
} | |||
.info { | |||
font-size: 28rpx; | |||
.vip { | |||
background-color: #FCCC92; | |||
color: #FA6239; | |||
width: 100rpx; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
height: 40rpx; | |||
border-radius: 20rpx; | |||
margin-top: 20rpx; | |||
} | |||
.name { | |||
font-size: 32rpx; | |||
} | |||
.tips { | |||
font-size: 26rpx; | |||
color: #ABABAB; | |||
} | |||
} | |||
.headBtn { | |||
margin-left: auto; | |||
padding: 15rpx 20rpx; | |||
background-color: $uni-color; | |||
color: #fff; | |||
border-radius: 20rpx; | |||
margin-top: 50rpx; | |||
} | |||
.setting { | |||
position: absolute; | |||
right: 50rpx; | |||
top: 50rpx; | |||
} | |||
} | |||
.userShop { | |||
.userList { | |||
.title { | |||
font-size: 32rpx; | |||
font-weight: 900; | |||
padding: 20rpx; | |||
} | |||
.list { | |||
display: flex; | |||
flex-wrap: wrap; | |||
.item { | |||
width: 270rpx; | |||
margin: 20rpx; | |||
display: flex; | |||
flex-direction: column; | |||
padding: 40rpx 30rpx; | |||
background-color: #fff; | |||
border-radius: 30rpx; | |||
line-height: 60rpx; | |||
.name {} | |||
.num { | |||
color: $uni-color; | |||
font-weight: 600; | |||
font-size: 28rpx; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.user { | |||
.line { | |||
display: flex; | |||
background-color: #fff; | |||
margin-top: 20rpx; | |||
padding: 20rpx 0; | |||
.item { | |||
flex: 1; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 20rpx 0; | |||
&:nth-child(1) { | |||
border-right: 1px solid #00000013; | |||
} | |||
.image { | |||
width: 100rpx; | |||
height: 70rpx; | |||
margin-right: 20rpx; | |||
} | |||
} | |||
} | |||
.grid { | |||
flex-direction: column; | |||
font-size: 26rpx; | |||
padding: 20rpx; | |||
.title { | |||
margin-bottom: 30rpx; | |||
font-size: 28rpx; | |||
font-weight: 600; | |||
} | |||
.image { | |||
width: 70rpx; | |||
height: 70rpx; | |||
margin-bottom: 10rpx; | |||
} | |||
text { | |||
text-align: center; | |||
width: 120rpx; | |||
} | |||
} | |||
} | |||
</style> |
@ -1,164 +1,182 @@ | |||
<template> | |||
<view class="trading-platform"> | |||
<topbar showRight="0"></topbar> | |||
<view class="frame"> | |||
<!--顶部栏--> | |||
<!--折线图--> | |||
<view class="chart"> | |||
折线图 | |||
</view> | |||
<!-- 供应商 --> | |||
<view class="supplier" v-if="userShop"> | |||
<view style="" class="purchaser-title"> | |||
<span class="active"> {{ $t('other.orderList') }}</span> | |||
</view> | |||
<view class="supplierList"> | |||
<orderList :orderList="list.records"/> | |||
</view> | |||
</view> | |||
<!-- 采购商 --> | |||
<view class="purchaser" v-else> | |||
<view style="" class="purchaser-title"> | |||
<span @click="actionIndexChange(0)" :class="actionIndex==0?'active':'noactive'">{{ $t('other.spotTrading') }}</span> | |||
<span @click="actionIndexChange(1)" :class="actionIndex==1?'active':'noactive'">{{ $t('other.futuresTrading') }}</span> | |||
</view> | |||
<view class="productList"> | |||
<productList :productList="list.records"/> | |||
</view> | |||
</view> | |||
</view> | |||
<tabber select="1"/> | |||
</view> | |||
<view class="trading-platform"> | |||
<topbar showRight="0"></topbar> | |||
<view class="frame"> | |||
<!--顶部栏--> | |||
<!--折线图--> | |||
<view class="chart"> | |||
折线图 | |||
</view> | |||
<!-- 供应商 --> | |||
<view class="supplier" v-if="userShop"> | |||
<view style="" class="purchaser-title"> | |||
<span class="active"> {{ $t('other.orderList') }}</span> | |||
</view> | |||
<view class="supplierList"> | |||
<orderList :orderList="list" /> | |||
</view> | |||
</view> | |||
<!-- 采购商 --> | |||
<view class="purchaser" v-else> | |||
<view style="" class="purchaser-title"> | |||
<span @click="actionIndexChange(index)" | |||
v-for="(item, index) in type" | |||
:class="actionIndex == index ? 'active' : 'noactive'">{{ item.name }}</span> | |||
<!-- <span @click="actionIndexChange(index)" | |||
:class="actionIndex==index?'active':'noactive'">{{ $t('other.futuresTrading') }}</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"; | |||
export default { | |||
components: { | |||
OrderList, | |||
ProductList, | |||
topbar, | |||
tabber, | |||
}, | |||
computed: { | |||
...mapGetters(['userShop']), | |||
}, | |||
data() { | |||
return { | |||
list: { | |||
records: [ | |||
{} | |||
], | |||
total: 0, | |||
}, | |||
actionIndex: 0, | |||
} | |||
}, | |||
methods: { | |||
// 切换tab | |||
actionIndexChange(index) { | |||
// index为0时切换到现货交易,index为1时切换到期货交易 | |||
this.actionIndex = index; | |||
}, | |||
} | |||
} | |||
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 = 'getMyProductlist' | |||
}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() | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.trading-platform { | |||
.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; | |||
background-image: url('../../static/image/index/1.png'); | |||
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 { | |||
.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; | |||
background-image: url('../../static/image/index/1.png'); | |||
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> |
@ -1,94 +1,93 @@ | |||
<template> | |||
<view> | |||
<view> | |||
<navbar :title="$t('pageTitle.selectIdentity')" leftClick @leftClick="$utils.navigateBack"/> | |||
<navbar :title="$t('pageTitle.selectIdentity')" | |||
:leftClick="!$route.query.back" @leftClick="$utils.navigateBack" /> | |||
<view class="container"> | |||
<view class="container"> | |||
<view class="title">{{ $t('components.selectIdentity') }}</view> | |||
<view class="button-group"> | |||
<!--供应商--> | |||
<view class="identity-button" @click="selectIdentity(0)"> | |||
<view class="identity-text"> {{ $t('other.iAmBuyer') }}</view> | |||
<view class="identity-icon"> | |||
<img src="../../static/image/index/5.png" style="width: 100%; height: 100%;"> | |||
</view> | |||
</view> | |||
<!--采购--> | |||
<view class="identity-button" @click="selectIdentity(1)"> | |||
<view class="identity-text"> {{ $t('other.iAmSupplier') }}</view> | |||
<view class="identity-icon"> | |||
<img src="../../static/image/index/6.png" style="width: 100%; height: 100%;"> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="title">{{ $t('components.selectIdentity') }}</view> | |||
<view class="button-group"> | |||
<!--供应商--> | |||
<view class="identity-button" @click="selectIdentity(0)"> | |||
<view class="identity-text"> {{ $t('other.iAmBuyer') }}</view> | |||
<view class="identity-icon"> | |||
<img src="../../static/image/index/5.png" style="width: 100%; height: 100%;"> | |||
</view> | |||
</view> | |||
<!--采购--> | |||
<view class="identity-button" @click="selectIdentity(1)"> | |||
<view class="identity-text"> {{ $t('other.iAmSupplier') }}</view> | |||
<view class="identity-icon"> | |||
<img src="../../static/image/index/6.png" style="width: 100%; height: 100%;"> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
methods: { | |||
selectIdentity(identity) { | |||
uni.navigateTo({ | |||
url: `/pages_order/auth/registerShop?identity=${identity}` | |||
}) | |||
}, | |||
} | |||
} | |||
export default { | |||
methods: { | |||
selectIdentity(identity) { | |||
uni.navigateTo({ | |||
url: `/pages_order/auth/registerShop?identity=${identity}` | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
* { | |||
box-sizing: border-box; | |||
} | |||
* { | |||
box-sizing: border-box; | |||
} | |||
.container { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
//height: 100vh; | |||
background-color: #f5f5f5; | |||
.container { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
//height: 100vh; | |||
background-color: #f5f5f5; | |||
.title { | |||
font-size: 40rpx; | |||
color: #333; | |||
margin: 80rpx 0; | |||
} | |||
.title { | |||
font-size: 40rpx; | |||
color: #333; | |||
margin: 80rpx 0; | |||
} | |||
.button-group { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
.button-group { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
width: 100vw; | |||
//padding: 0 20px; | |||
width: 100vw; | |||
//padding: 0 20px; | |||
.identity-button { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
width: 80%; | |||
margin-bottom: 40rpx; | |||
padding: 40rpx 50rpx; | |||
background-color: #2d2f59; | |||
border-radius: 20rpx; | |||
color: white; | |||
.identity-button { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
width: 80%; | |||
margin-bottom: 40rpx; | |||
padding: 40rpx 50rpx; | |||
background-color: #2d2f59; | |||
border-radius: 20rpx; | |||
color: white; | |||
.identity-text { | |||
font-size: 40rpx; | |||
} | |||
.identity-text { | |||
font-size: 40rpx; | |||
} | |||
.identity-icon { | |||
width: 130rpx; | |||
height: 130rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> | |||
.identity-icon { | |||
width: 130rpx; | |||
height: 130rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -1,133 +1,167 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar :title="$t('pageTitle.systemSettings')" leftClick @leftClick="$utils.navigateBack"/> | |||
<view class="frame"> | |||
<view class="content" v-for="(item, index) in list" :key="index"> | |||
<view class="title">{{ item.title }}</view> | |||
<view class="item" v-for="(item2, index) in item.itemList" :key="index" @click="tapItem(item2, index)"> | |||
<view class="key"> | |||
<view class="img"> | |||
<img :src="item2.leftIcon" style="width: 100%; height: 100%;"/> | |||
</view> | |||
<view class="text"> | |||
{{ item2.text }} | |||
</view> | |||
</view> | |||
<view class="value"> | |||
{{ item.rightIcon }} | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 语言切换 --> | |||
<!--<view style="padding: 20rpx;"--> | |||
<!-- @click="$refs.changeLanguage.open()">--> | |||
<!-- {{ $t('pages.index.index.language') }}--> | |||
<!--</view>--> | |||
<changeLanguage ref="changeLanguage"/> | |||
</view> | |||
<view class="page"> | |||
<navbar :title="$t('pageTitle.systemSettings')" leftClick @leftClick="$utils.navigateBack" /> | |||
<view class="frame"> | |||
<view class="content" v-for="(item, index) in list" :key="index"> | |||
<view class="title">{{ item.title }}</view> | |||
<view class="item" v-for="(item2, index) in item.itemList" :key="index" @click="tapItem(item2, index)"> | |||
<view class="key"> | |||
<view class="img"> | |||
<img :src="item2.leftIcon" style="width: 100%; height: 100%;" /> | |||
</view> | |||
<view class="text"> | |||
{{ item2.text }} | |||
</view> | |||
</view> | |||
<view class="value"> | |||
{{ item.rightIcon }} | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 语言切换 --> | |||
<!--<view style="padding: 20rpx;"--> | |||
<!-- @click="$refs.changeLanguage.open()">--> | |||
<!-- {{ $t('pages.index.index.language') }}--> | |||
<!--</view>--> | |||
<changeLanguage ref="changeLanguage" /> | |||
</view> | |||
</template> | |||
<script> | |||
import topbar from "@/components/base/topbar.vue"; | |||
import tabber from "@/components/base/tabbar.vue"; | |||
import ChangeLanguage from "@/components/base/changeLanguage.vue"; | |||
export default { | |||
name: "systemSet", | |||
components: {ChangeLanguage, tabber, topbar}, | |||
data() { | |||
return { | |||
list: [ | |||
{ | |||
title: `${this.$t('pageTitle.accountSetting')}`, | |||
itemList: [ | |||
// text: `${this.$t('pageTitle.switchAccount')}` | |||
{leftIcon: "../static/center/1.svg", text: `${this.$t('pageTitle.switchAccount')}`, rightIcon: ">"}, | |||
{leftIcon: "../static/center/2.svg", text: `${this.$t('pageTitle.forgotPasswordPage')}`, rightIcon: ">"}, | |||
{leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.logout'), rightIcon: ">"}, | |||
] | |||
}, | |||
{ | |||
title: `${this.$t('pageTitle.systemSetting')}`, | |||
itemList: [ | |||
{leftIcon: "../static/center/1.svg", text: `${this.$t('pageTitle.languageSwitch')}`, rightIcon: ">"}, | |||
{leftIcon: "../static/center/2.svg", text: `${this.$t('pageTitle.versionUpdate')}`, rightIcon: ">"}, | |||
{leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.clearCache'), rightIcon: ">"}, | |||
] | |||
}, | |||
{ | |||
title: `${this.$t('pageTitle.identitySetting')}`, | |||
itemList: [ | |||
{leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.switchIdentity'), rightIcon: ">"}, | |||
] | |||
} | |||
], | |||
} | |||
}, | |||
methods: { | |||
tapItem(item, index) { | |||
if (item.text === this.$t('pageTitle.languageSwitch')) { | |||
this.$refs.changeLanguage.open(); | |||
} | |||
} | |||
}, | |||
} | |||
import topbar from "@/components/base/topbar.vue"; | |||
import tabber from "@/components/base/tabbar.vue"; | |||
import ChangeLanguage from "@/components/base/changeLanguage.vue"; | |||
export default { | |||
name: "systemSet", | |||
components: { | |||
ChangeLanguage, | |||
tabber, | |||
topbar | |||
}, | |||
data() { | |||
return { | |||
list: [{ | |||
title: `${this.$t('pageTitle.accountSetting')}`, | |||
itemList: [ | |||
// text: `${this.$t('pageTitle.switchAccount')}` | |||
{ | |||
leftIcon: "../static/center/1.svg", | |||
text: `${this.$t('pageTitle.switchAccount')}`, | |||
rightIcon: ">" | |||
}, | |||
{ | |||
leftIcon: "../static/center/2.svg", | |||
text: `${this.$t('pageTitle.forgotPasswordPage')}`, | |||
rightIcon: ">" | |||
}, | |||
{ | |||
leftIcon: "../static/center/2.svg", | |||
text: this.$t('pageTitle.logout'), | |||
rightIcon: ">", | |||
type : 'logout', | |||
}, | |||
] | |||
}, | |||
{ | |||
title: `${this.$t('pageTitle.systemSetting')}`, | |||
itemList: [{ | |||
leftIcon: "../static/center/1.svg", | |||
text: `${this.$t('pageTitle.languageSwitch')}`, | |||
rightIcon: ">" | |||
}, | |||
{ | |||
leftIcon: "../static/center/2.svg", | |||
text: `${this.$t('pageTitle.versionUpdate')}`, | |||
rightIcon: ">" | |||
}, | |||
{ | |||
leftIcon: "../static/center/2.svg", | |||
text: this.$t('pageTitle.clearCache'), | |||
rightIcon: ">" | |||
}, | |||
] | |||
}, | |||
{ | |||
title: `${this.$t('pageTitle.identitySetting')}`, | |||
itemList: [{ | |||
leftIcon: "../static/center/2.svg", | |||
text: this.$t('pageTitle.switchIdentity'), | |||
rightIcon: ">" | |||
}, ] | |||
} | |||
], | |||
} | |||
}, | |||
methods: { | |||
tapItem(item, index) { | |||
if (item.text === this.$t('pageTitle.languageSwitch')) { | |||
this.$refs.changeLanguage.open(); | |||
}else if(item.type){ | |||
this[item.type]() | |||
} | |||
}, | |||
logout(){ | |||
this.$store.commit('logout') | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
background-color: #FFF; | |||
height: 100vh; | |||
.frame { | |||
padding: 40rpx; | |||
.content { | |||
margin-bottom: 40rpx; | |||
.title { | |||
font-size: 30rpx; | |||
color: #b0b0b0; | |||
} | |||
.item { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 20rpx 40rpx; | |||
.key { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
color: #333333; | |||
font-size: 32rpx; | |||
.img { | |||
width: 40rpx; | |||
height: 40rpx; | |||
} | |||
.text { | |||
margin-left: 20rpx; | |||
} | |||
} | |||
.value { | |||
color: #999999; | |||
font-size: 36rpx; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.page { | |||
background-color: #FFF; | |||
height: 100vh; | |||
.frame { | |||
padding: 40rpx; | |||
.content { | |||
margin-bottom: 40rpx; | |||
.title { | |||
font-size: 30rpx; | |||
color: #b0b0b0; | |||
} | |||
.item { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 20rpx 40rpx; | |||
.key { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
color: #333333; | |||
font-size: 32rpx; | |||
.img { | |||
width: 40rpx; | |||
height: 40rpx; | |||
} | |||
.text { | |||
margin-left: 20rpx; | |||
} | |||
} | |||
.value { | |||
color: #999999; | |||
font-size: 36rpx; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -1,471 +1,478 @@ | |||
<template> | |||
<view class="now-order"> | |||
<navbar :title="$t('pageTitle.immediateOrder')" leftClick @leftClick="$utils.navigateBack"/> | |||
<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"> | |||
<view>{{ $t('components.productSpe') }}</view> | |||
<view> | |||
铝制品(Al>96%) | |||
</view> | |||
</view> | |||
<!--<uv-divider text="" :hairline="true"></uv-divider>--> | |||
<!--提货地点--> | |||
<view class="currentRegion"> | |||
<view>{{ $t('components.pickupLocation') }}</view> | |||
<view @click.stop="selectAddr"> | |||
<input class="input" | |||
disabled | |||
v-model="form.currentRegion" placeholder="请选择所在地区"></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="请输入详细地址" 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"> | |||
> | |||
<!--<img src="../static/address/1.svg" style="width: 40rpx;--> | |||
<!--height: 40rpx;">--> | |||
</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 v-model="form.price" disabled clearable></input> | |||
</view> | |||
</view> | |||
<!--履约保证金--> | |||
<view class="performanceBond"> | |||
<view class="key">{{ $t('other.performanceDeposit') }}</view> | |||
<view class="value"> | |||
<input v-model="form.performanceBond" clearable></input> | |||
</view> | |||
</view> | |||
<view class="Tip"> | |||
<span class="span">{{ $t('other.priceQuantityPercentage') }}</span> | |||
</view> | |||
‘ | |||
<!--立即下单和联系我们--> | |||
<view class="btns"> | |||
<span @click="ljxd" class="ljxd"> | |||
{{ $t('components.immediateOrder') }} | |||
</span> | |||
<span @click="contactUs" class="lxwm"> | |||
{{ $t('components.contactUs') }} | |||
</span> | |||
<span class="tip">{{ $t('components.contactUsIfAnyProblems') }}</span> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 联系客服弹框 --> | |||
<customerServicePopup ref="customerServicePopup" /> | |||
</view> | |||
<view class="now-order"> | |||
<navbar :title="$t('pageTitle.immediateOrder')" leftClick @leftClick="$utils.navigateBack" /> | |||
<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"> | |||
<view>{{ $t('components.productSpe') }}</view> | |||
<view> | |||
铝制品(Al>96%) | |||
</view> | |||
</view> | |||
<!--<uv-divider text="" :hairline="true"></uv-divider>--> | |||
<!--提货地点--> | |||
<view class="currentRegion"> | |||
<view>{{ $t('components.pickupLocation') }}</view> | |||
<!-- <view @click.stop="selectAddr"> | |||
<input class="input" disabled v-model="form.currentRegion" placeholder="请选择所在地区"></input> | |||
<view class="orientation"> | |||
<img src="../../static/image/address/selectIcon.png" | |||
style="width:30rpx;height: 30rpx;margin:5rpx 5rpx 5rpx 5rpx;"> | |||
</view> | |||
</view> --> | |||
<view class=""> | |||
{{ fatherData.address }} | |||
</view> | |||
</view> | |||
<!--详细地址--> | |||
<view class="item"> | |||
<view>{{ $t('components.detailedAddress') }}</view> | |||
<view> | |||
<!-- <input v-model="form.address" placeholder="请输入详细地址" 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"> | |||
> | |||
<!--<img src="../static/address/1.svg" style="width: 40rpx;--> | |||
<!--height: 40rpx;">--> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!--暂定数量--> | |||
<view class="tentativeQuantity"> | |||
<view class="key">{{ $t('other.tentativeQuantity') }}</view> | |||
<view class="value"> | |||
<uv-number-box | |||
inputWidth="200rpx" | |||
v-model="form.tentativeQuantity" :max="fatherData.num"></uv-number-box> | |||
</view> | |||
</view> | |||
<!--单价--> | |||
<view class="item"> | |||
<view>{{ $t('components.unitPrice') }}</view> | |||
<view> | |||
<input v-model="fatherData.price" disabled clearable></input> | |||
</view> | |||
</view> | |||
<!--履约保证金--> | |||
<view class="performanceBond"> | |||
<view class="key">{{ $t('other.performanceDeposit') }}</view> | |||
<view class="value"> | |||
<input v-model="form.performanceBond" clearable></input> | |||
</view> | |||
</view> | |||
<view class="Tip"> | |||
<span class="span">{{ $t('other.priceQuantityPercentage') }}</span> | |||
</view> | |||
‘ | |||
<!--立即下单和联系我们--> | |||
<view class="btns"> | |||
<span @click="ljxd" class="ljxd"> | |||
{{ $t('components.immediateOrder') }} | |||
</span> | |||
<span @click="contactUs" class="lxwm"> | |||
{{ $t('components.contactUs') }} | |||
</span> | |||
<span class="tip">{{ $t('components.contactUsIfAnyProblems') }}</span> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 联系客服弹框 --> | |||
<customerServicePopup ref="customerServicePopup" /> | |||
</view> | |||
</template> | |||
<script> | |||
import topbar from "@/components/base/topbar.vue"; | |||
import {mapGetters} from 'vuex' | |||
import Position from '@/utils/position.js' | |||
import dayjs from "dayjs"; | |||
import customerServicePopup from '@/components/config/customerServicePopup.vue' | |||
export default { | |||
name: "nowOrder", | |||
components: { | |||
topbar,customerServicePopup, | |||
}, | |||
computed: { | |||
...mapGetters(['userShop']), | |||
}, | |||
onLoad(options) { | |||
if (options.params) { | |||
const fatherData = JSON.parse(decodeURIComponent(options.params)); | |||
console.log(fatherData, "fatherData==========") | |||
this.fatherData = fatherData; | |||
} | |||
}, | |||
data() { | |||
return { | |||
fatherData: {}, | |||
form: { | |||
currentRegion: '', | |||
address: '', | |||
tentativeQuantity: 0, | |||
deliveryDate: dayjs(new Date()).format("YYYY-MM-DD"), | |||
price: 0, | |||
performanceBond: 0, | |||
latitude: '', | |||
longitude: '', | |||
}, | |||
phoneNumber: '00000000000' | |||
} | |||
}, | |||
methods: { | |||
// 立即下单 | |||
ljxd() { | |||
var itemStr = encodeURIComponent(JSON.stringify(this.form)); | |||
uni.navigateTo({ | |||
url: `/pages_order/tradingPlatform/confirmOrder?params=${itemStr}`, | |||
}); | |||
}, | |||
// 联系我们 | |||
contactUs() { | |||
this.$refs.customerServicePopup.open() | |||
}, | |||
startDateChange(val) { | |||
this.$nextTick(() => { | |||
this.form.deliveryDate = dayjs(val.value).format("YYYY-MM-DD") | |||
}); | |||
}, | |||
startDateOpen() { | |||
this.$refs.startDateRef.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 | |||
}) | |||
}, | |||
//提取用户选择的地址信息复制给表单数据 | |||
setAddress(res) { | |||
//经纬度信息 | |||
this.form.latitude = res.latitude | |||
this.form.longitude = res.longitude | |||
if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||
return this.form.currentRegion = res.name | |||
} | |||
if (res.address || res.name) { | |||
return this.form.currentRegion = res.address + res.name | |||
} | |||
this.form.currentRegion = '' //用户啥都没选就点击勾选 | |||
}, | |||
} | |||
} | |||
import topbar from "@/components/base/topbar.vue"; | |||
import { | |||
mapGetters | |||
} from 'vuex' | |||
import Position from '@/utils/position.js' | |||
import dayjs from "dayjs"; | |||
import customerServicePopup from '@/components/config/customerServicePopup.vue' | |||
export default { | |||
name: "nowOrder", | |||
components: { | |||
topbar, | |||
customerServicePopup, | |||
}, | |||
computed: { | |||
...mapGetters(['userShop']), | |||
}, | |||
onLoad(options) { | |||
if (options.params) { | |||
const fatherData = JSON.parse(decodeURIComponent(options.params)); | |||
console.log(fatherData, "fatherData==========") | |||
this.fatherData = fatherData; | |||
} | |||
}, | |||
data() { | |||
return { | |||
fatherData: {}, | |||
form: { | |||
currentRegion: '', | |||
address: '', | |||
tentativeQuantity: 0, | |||
deliveryDate: dayjs(new Date()).format("YYYY-MM-DD"), | |||
price: 0, | |||
performanceBond: 0, | |||
latitude: '', | |||
longitude: '', | |||
}, | |||
phoneNumber: '00000000000' | |||
} | |||
}, | |||
methods: { | |||
// 立即下单 | |||
ljxd() { | |||
var itemStr = encodeURIComponent(JSON.stringify(this.form)); | |||
uni.navigateTo({ | |||
url: `/pages_order/tradingPlatform/confirmOrder?params=${itemStr}`, | |||
}); | |||
}, | |||
// 联系我们 | |||
contactUs() { | |||
this.$refs.customerServicePopup.open() | |||
}, | |||
startDateChange(val) { | |||
this.$nextTick(() => { | |||
this.form.deliveryDate = dayjs(val.value).format("YYYY-MM-DD") | |||
}); | |||
}, | |||
startDateOpen() { | |||
this.$refs.startDateRef.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 | |||
}) | |||
}, | |||
//提取用户选择的地址信息复制给表单数据 | |||
setAddress(res) { | |||
//经纬度信息 | |||
this.form.latitude = res.latitude | |||
this.form.longitude = res.longitude | |||
if (!res.address && res.name) { //用户直接选择城市的逻辑 | |||
return this.form.currentRegion = res.name | |||
} | |||
if (res.address || res.name) { | |||
return this.form.currentRegion = res.address + res.name | |||
} | |||
this.form.currentRegion = '' //用户啥都没选就点击勾选 | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.now-order { | |||
background-color: #FFF; | |||
height: 100vh; | |||
.frame { | |||
.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: 5rpx; | |||
background-color: #FFF; | |||
//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; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.now-order { | |||
background-color: #FFF; | |||
height: 100vh; | |||
.frame { | |||
.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: 5rpx; | |||
background-color: #FFF; | |||
//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; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |