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 1 year ago
parent
677f96295b
commit
0f760103c4
32 changed files with 1058 additions and 522 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -7
      components/base/tabbar.vue
  2. +79
    -0
      components/base/topbar.vue
  3. +134
    -103
      components/user/productList.vue
  4. +5
    -1
      locale/en.json
  5. +5
    -1
      locale/zh-Hans.json
  6. +14
    -0
      pages.json
  7. +231
    -409
      pages/index/index.vue
  8. +122
    -0
      pages/index/tradingPlatform.vue
  9. +365
    -0
      pages_order/auth/registerShop.vue
  10. +94
    -0
      pages_order/auth/selectionIdentity.vue
  11. BIN
      static/image/index/1.png
  12. BIN
      static/image/index/2.png
  13. BIN
      static/image/index/3.png
  14. BIN
      static/image/index/4.png
  15. BIN
      static/image/index/5.png
  16. BIN
      static/image/index/6.png
  17. BIN
      static/image/tabbar/Trading-a.png
  18. BIN
      static/image/tabbar/cart-a.png
  19. BIN
      static/image/tabbar/cart.png
  20. BIN
      static/image/tabbar/category-a.png
  21. BIN
      static/image/tabbar/category.png
  22. BIN
      static/image/tabbar/center-a.png
  23. BIN
      static/image/tabbar/center.png
  24. BIN
      static/image/tabbar/clearanceService-a.png
  25. BIN
      static/image/tabbar/home-a.png
  26. BIN
      static/image/tabbar/home.png
  27. BIN
      static/image/tabbar/index-a.png
  28. BIN
      static/image/tabbar/order-a.png
  29. BIN
      static/image/tabbar/order.png
  30. BIN
      static/image/tabbar/组 46940_1.png
  31. BIN
      static/image/tradingPlatform/1.png
  32. +1
    -1
      uni.scss

+ 8
- 7
components/base/tabbar.vue View File

@ -33,19 +33,19 @@
return {
list : [
{
"selectedIconPath": "/static/image/tabbar/home-a.png",
"selectedIconPath": "/static/image/tabbar/index-a.png",
"iconPath": "/static/image/tabbar/home.png",
"pagePath": "/pages/index/index",
"title": "tabbar.title.1"
},
{
"selectedIconPath": "/static/image/tabbar/order-a.png",
"selectedIconPath": "/static/image/tabbar/Trading-a.png",
"iconPath": "/static/image/tabbar/order.png",
"pagePath": "/pages/index/order",
"pagePath": "/pages/index/tradingPlatform",
"title": "tabbar.title.2"
},
{
"selectedIconPath": "/static/image/tabbar/cart-a.png",
"selectedIconPath": "/static/image/tabbar/clearanceService-a.png",
"iconPath": "/static/image/tabbar/cart.png",
"pagePath": "/pages/index/cart",
"title": "tabbar.title.3"
@ -80,7 +80,7 @@
.tabbar{
position: fixed;
width: 750rpx;
background-color: #fff;
background-color: $uni-color;
display: flex;
justify-content: center;
align-items: center;
@ -90,7 +90,7 @@
z-index: 99999;
bottom: 0;
left: 0;
color: #BCBCBC;
color: #FFF;
.item{
flex: 1;
display: flex;
@ -116,6 +116,7 @@
}
}
.active{
color: $uni-color !important;
color: #FFF !important;
}
</style>

+ 79
- 0
components/base/topbar.vue View File

@ -0,0 +1,79 @@
<template>
<view class="top-bar">
<!--左边-->
<view class="titleCls">
<view>
<img src="../../static/image/cart/1.png" style="width:100%;height:100%;">
</view>
<span class="text">铝产品现货交易平台</span>
</view>
<!--右边-->
<view v-if="showRight == '1'" @click="switchIdentity" class="change">
{{ $t('pages.index.index.purchaser') }}
</view>
</view>
</template>
<script>
export default {
props : {
showRight : {
default : '0',
type : String,
}
},
data(){
return {
}
},
methods : {
// 切换身份
switchIdentity() {
uni.navigateTo({
url: '/pages_order/auth/selectionIdentity'
})
},
}
}
</script>
<style lang="scss" scoped>
// 顶部栏
.top-bar {
display: flex;
justify-content: space-between;
height: 120rpx;
background-color: $uni-color;
.titleCls {
display: flex;
padding: 20rpx 10rpx;
.text {
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
color: #FFFFFF;
margin-left: 20rpx;
}
}
.change {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
height: 70rpx;
border-radius: 40rpx;
color: white;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: $uni-color;
border: 1px solid #757986;
//margin-top: 20rpx;
border-radius: 40rpx;
}
}
</style>

+ 134
- 103
components/user/productList.vue View File

@ -1,112 +1,143 @@
<template>
<view class="list">
<view class="item"
v-for="(item, index) in 10"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
:key="index">
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
<view class="info">
<view class="title">
桌布租赁
</view>
<view class="price">
<text>￥58</text>元/起
</view>
<view class="favorable">
<view class="t">
限时优惠
</view>
<view class="p">
￥48
</view>
</view>
<view class="num">
已售卖5000+件
</view>
</view>
<view class="btn">
<uv-icon name="shopping-cart"
color="#fff"></uv-icon>
</view>
</view>
</view>
<view class="list">
<view class="item"
v-for="(item, index) in 10"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
:key="index">
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
<view class="info">
<view class="title">
铝制品
</view>
<view class="price">
<text>￥58</text>
元/起
</view>
<!--<view class="favorable">-->
<!-- <view class="t">-->
<!-- 限时优惠-->
<!-- </view>-->
<!-- <view class="p">-->
<!-- ￥48-->
<!-- </view>-->
<!--</view>-->
<view class="num">
最多批发*快速下单
</view>
</view>
<view class="btn">
<view @click="immediatePurchase(item)" class="change">
立即采购
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"productList",
data() {
return {
};
},
methods : {
},
}
export default {
name: "productList",
data() {
return {};
},
methods: {
// 立即购买
immediatePurchase(item) {
}
},
}
</script>
<style scoped lang="scss">
.list{
display: flex;
flex-wrap: wrap;
.item{
position: relative;
width: 300rpx;
padding: 20rpx;
background-color: #fff;
border-radius: 20rpx;
margin-top: 20rpx;
&:nth-child(odd){
margin-right: 20rpx;
}
.image{
width: 300rpx;
height: 250rpx;
border-radius: 20rpx;
}
.info{
font-size: 26rpx;
.title{
font-size: 30rpx;
}
.price{
color: #D03F25;
margin-top: 6rpx;
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;
.p{
color: #fff;
margin-left: 10rpx;
}
}
.num{
margin-top: 6rpx;
font-size: 22rpx;
color: #888;
}
}
.btn{
position: absolute;
right: 20rpx;
bottom: 20rpx;
padding: 10rpx;
border-radius: 50%;
background-color: $uni-color;
}
}
.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;
&:nth-child(odd) {
margin-right: 20rpx;
}
.image {
width: 300rpx;
height: 250rpx;
border-radius: 20rpx;
}
.info {
font-size: 26rpx;
.title {
font-size: 30rpx;
color: #000;
}
.price {
color: #D03F25;
margin-top: 6rpx;
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;
.p {
color: #fff;
margin-left: 10rpx;
}
}
.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;
.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>

+ 5
- 1
locale/en.json View File

@ -7,7 +7,11 @@
"index" : {
"index" : {
"agreement" : "Agreement content",
"language" : "Change Language"
"language" : "Change Language",
"purchaser":"purchaser",
"supplier":"supplier",
"companyProfile":"公司简介",
"aluminiumProduct":"铝制品"
}
}
},


+ 5
- 1
locale/zh-Hans.json View File

@ -10,7 +10,11 @@
"index" : {
"index" : {
"agreement" : "协议内容",
"language" : "切换语言"
"language" : "切换语言",
"purchaser":"采购商",
"supplier":"供应商",
"companyProfile":"公司简介",
"aluminiumProduct":"铝制品"
}
}
},


+ 14
- 0
pages.json View File

@ -5,6 +5,12 @@
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/tradingPlatform",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/order",
"style": {
@ -41,9 +47,17 @@
"pages": [{
"path": "order/orderDetail"
},
{
"path": "auth/selectionIdentity"
},
{
"path": "auth/registerShop"
},
{
"path": "mine/purse"
},
{
"path": "mine/runningWater"
},


+ 231
- 409
pages/index/index.vue View File

@ -1,417 +1,239 @@
<template>
<view class="page">
<navbar/>
<view style="padding: 20rpx;"
@click="$refs.changeLanguage.open()">
{{ $t('pages.index.index.language') }}
</view>
<view class="search">
<view @click="showSelectArea" class="left-area">
<image src="@/static/image/home/address-icon.png"></image>
<view class="area">{{ area }}</view>
<image src="@/static/image/home/arrow-icon.png" mode="aspectFit"></image>
<view class="parting-line">|</view>
</view>
<view class="center-area">
<image
style="margin-right: 20rpx;"
src="@/static/image/home/search-icon.png"></image>
<input v-model="queryParams.title"
placeholder="桌布租赁" />
</view>
<!-- <view class="right-area">
<view @click="searchAddress" class="search-button">
搜索
</view>
</view> -->
</view>
<view class="swipe">
<uv-swiper
:list="bannerList"
indicator
height="320rpx"
keyName="url"></uv-swiper>
</view>
<!-- 水洗店 -->
<view class="userShop"
v-if="userShop">
<view class="list">
<view class="item"
v-for="(item, index) in 4"
:key="index">
<view class="">
<view class="">
我的客户
</view>
<view class="num">
{{ 30 }}
</view>
</view>
<view class="">
<image :src="`/static/image/home/${index}.png`" mode=""></image>
</view>
</view>
</view>
</view>
<!-- 酒店 -->
<view class="user"
v-else>
<uv-notice-bar
fontSize="28rpx"
:text="text"></uv-notice-bar>
<view class="shop">
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
mode=""></image>
<view class="shopInfo">
<view class="title">
HOUS水洗店
</view>
<view class="tags">
<view class="tag">
桌布水洗
</view>
<view class="tag">
桌布租赁
</view>
</view>
<view class="time">
9:00-18:00
</view>
<view class="address">
长沙市天心区桂花坪街道231号
</view>
</view>
<view class="btns">
<view class="btn"
@click="$utils.navigateTo('/pages_order/auth/wxUserInfo')">
我要水洗
</view>
</view>
<view class="tips">
关联门店：主信门店
</view>
</view>
<view class="productList">
<productList/>
</view>
</view>
<!-- <selectArea ref="selectArea" @close="closeAreaPro" @select="selectArea"></selectArea> -->
<changeLanguage ref="changeLanguage" />
<tabber select="0"/>
</view>
<view class="page">
<!--顶部栏-->
<topbar showRight="1" ></topbar>
<!-- 语言切换 -->
<!--<view style="padding: 20rpx;"-->
<!-- @click="$refs.changeLanguage.open()">-->
<!-- {{ $t('pages.index.index.language') }}-->
<!--</view>-->
<!--<changeLanguage ref="changeLanguage"/>-->
<!-- 供应商 -->
<view class="supplier" v-if="userShop">
</view>
<!-- 采购商 -->
<view class="purchaser" v-else>
<!--上面第一个-->
<view class="topItem">
<view class="imageFrame">
<img src="../../static/image/index/4.png" style="width:100%;height:100%;">
</view>
</view>
<!-- 下面三个-->
<view class="threeHeOne">
<!-- 第一个-->
<view class="oneItem">
<view class="left">
<span>Company Profile</span>
<span> {{ $t('pages.index.index.companyProfile') }}</span>
<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span>
</view>
<view class="right">
随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
</view>
</view>
<!-- 第二个-->
<view class="twoItem">
<view class="left">
<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%;">
</view>
</view>
<!-- 第三个-->
<view class="threeItem">
<view class="right">
随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
</view>
<view class="left">
<span>Company Profile</span>
<span> {{ $t('pages.index.index.companyProfile') }}</span>
<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span>
</view>
</view>
</view>
</view>
<tabber select="0"/>
</view>
</template>
<script>
import Position from '@/utils/position.js'
import tabber from '@/components/base/tabbar.vue'
import productList from '@/components/user/productList.vue'
import { mapGetters } from 'vuex'
// import selectArea from '../../components/selectArea.vue';
import changeLanguage from '@/components/base/changeLanguage.vue'
export default {
components : {
tabber,
productList,
changeLanguage
},
data() {
return {
area: '长沙',
text : '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....',
queryParams: {
pageNo: 1,
pageSize: 10,
title: ''
},
bannerList: [
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
],
productList: [],
}
},
computed : {
...mapGetters(['userShop']),
},
methods: {
//显示选择地区
showSelectArea() {
// this.$refs.selectArea.open()
},
//搜索地址
searchAddress() {
Position.getLocation(res => {
Position.selectAddress(res.longitude, res.latitude, success => {
let address = this.extractProvinceAndCity(success)
this.queryParams.title = address.city
})
})
},
//提取用户选择的地址信息(省市县信息)
extractProvinceAndCity(res) { //提取用户选择的地址信息(省市)
if (!res.address && res.name) { //用户直接选择城市的逻辑
return {
province: '',
city: res.name
};
}
if (res.address) { //用户选择了详细地址，要从详细地址中提取出省市县信息
// 使用正则表达式匹配省市县
const regex = /(?<province>[\u4e00-\u9fa5]+?省)(?<city>[\u4e00-\u9fa5]+?(?:市|自治州|盟|地区))/;
const match = res.address.match(regex);
if (match) { // 如果匹配成功，则返回省和市的信息
return {
province: match.groups.province,
city: match.groups.city
};
}
}
return { //用户没选择地址就点了确定按钮
province: '',
city: ''
}
},
}
}
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,
productList,
changeLanguage
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
title: ''
},
}
},
computed: {
...mapGetters(['userShop']),
},
methods: {
}
}
</script>
<style scoped lang="scss">
.search {
height: 82rpx;
width: 710rpx;
background: #FFFFFF;
margin: 20rpx auto;
border-radius: 41rpx;
box-sizing: border-box;
padding: 0 15rpx;
display: flex;
align-items: center;
// justify-content: space-between;
.left-area,
.center-area {
display: flex;
align-items: center;
}
.left-area {
max-width: 160rpx;
image {
flex-shrink: 0;
width: 26rpx;
height: 26rpx;
}
.area {
font-size: 24rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 限制显示两行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #292929;
}
.parting-line {
flex-shrink: 0;
font-size: 26rpx;
color: #ccc;
margin: 0rpx 5rpx;
}
}
.center-area {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: calc(100% - 290rpx);
margin-left: 30rpx;
image {
width: 26rpx;
height: 26rpx;
}
.van-field {
background-color: transparent;
box-sizing: border-box;
height: 82rpx;
line-height: 82rpx;
width: calc(100% - 30rpx);
padding: 0rpx 10rpx 0rpx 0rpx;
input {
height: 82rpx;
font-size: 60rpx;
}
}
}
.right-area {
.search-button {
background: #60BDA2;
height: 60rpx;
width: 130rpx;
font-size: 26rpx;
border-radius: 35rpx;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.swipe{
overflow: hidden;
border-radius: 20rpx;
margin: 20rpx;
}
.page{
& /deep/ .uv-icon__icon{
font-size: 30rpx !important;
}
// 水洗店
.userShop{
.list{
display: flex;
flex-wrap: wrap;
.item{
display: flex;
justify-content: center;
align-items: center;
width: 330rpx;
margin: 20rpx;
padding: 30rpx 0;
color: #FFFFFF;
line-height: 50rpx;
border-radius: 20rpx;
font-size: 28rpx;
.num{
font-size: 38rpx;
font-weight: 900;
}
image{
width: 110rpx;
height: 110rpx;
margin-left: 20rpx;
}
&:nth-child(1){
background: #F07A77;
}
&:nth-child(2){
background: #F48B4E;
}
&:nth-child(3){
background: #6487E1;
}
&:nth-child(4){
background: #61B7E6;
}
}
}
}
// 酒店
.user{
padding: 20rpx;
.shop{
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
margin-top: 20rpx;
border-radius: 20rpx;
padding: 20rpx;
overflow: hidden;
.image{
width: 180rpx;
height: 180rpx;
margin-right: 20rpx;
border-radius: 20rpx;
}
.shopInfo{
font-size: 22rpx;
.title{
font-size: 30rpx;
}
.tags{
display: flex;
.tag{
padding: 4rpx 6rpx;
border: 1rpx solid #FFAC6E;
color: #FFAC6E;
margin-right: 10rpx;
margin-top: 10rpx;
font-size: 18rpx;
}
}
.time{
margin-top: 10rpx;
display: flex;
}
.address{
margin-top: 10rpx;
display: flex;
}
}
.btns{
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
.btn{
background-color: $uni-color;
color: #fff;
box-shadow: 0 0 5rpx 5rpx #FFAC6E;
padding: 10rpx 20rpx;
flex-shrink: 0;
border-radius: 35rpx;
}
}
.tips{
position: absolute;
top: 0;
right: 0;
font-size: 24rpx;
color: #FFAC6E;
background-color: #FEF5EE;
padding: 10rpx 20rpx;
border-radius: 10rpx;
}
}
}
}
* {
box-sizing: border-box;
}
.page {
& /deep/ .uv-icon__icon {
font-size: 30rpx !important;
}
// 供应商
.supplier {
}
// 采购商
.purchaser {
display: flex;
flex-direction: column;
//gap: 40rpx;
background-color: #2e394d;
.topItem {
display: flex;
justify-content: center;
align-items: center;
height: 350rpx;
background-image: url('../../static/image/index/1.png');
background-size: cover;
.imageFrame {
width: 90%;
height: 90%;
//padding:80rpx;
}
}
.threeHeOne {
display: flex;
padding: 20rpx 40rpx 40rpx;
flex-direction: column;
.oneItem {
display: flex;
//width: 100vw;
.left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20rpx;
width: 33%;
background-color: #1e293d;
color: white;
font-size: 26rpx;
.subText {
background-color: #2e394d;
padding: 0 20rpx;
}
}
.right {
height: 200rpx;
width: 66%;
padding: 20rpx;
background-image: url('../../static/image/index/1.png');
background-size: cover;
font-size: 20rpx;
color: white;
}
}
.twoItem {
display: flex;
justify-content: space-between;
gap: 20rpx;
height: 300rpx;
margin-top: 20rpx;
padding: 10rpx;
.left {
width: 60%;
padding: 20rpx;
background-color: #1e293d;
}
.right {
width: 40%;
padding: 20rpx;
background-color: #1e293d;
}
}
.threeItem {
display: flex;
//width: 100vw;
.left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20rpx;
width: 33%;
background-color: #1e293d;
color: white;
font-size: 26rpx;
.subText {
background-color: #2e394d;
padding: 0 20rpx;
}
}
.right {
height: 200rpx;
width: 66%;
padding: 20rpx;
background-image: url('../../static/image/index/1.png');
background-size: cover;
font-size: 20rpx;
color: white;
}
}
}
}
}
</style>

+ 122
- 0
pages/index/tradingPlatform.vue View File

@ -0,0 +1,122 @@
<template>
<view class="trading-platform">
<view class="frame">
<!--顶部栏-->
<topbar showRight="0"></topbar>
<!--折线图-->
<view class="chart">
折线图
</view>
<!-- 供应商 -->
<view class="supplier" v-if="userShop">
</view>
<!-- 采购商 -->
<view class="purchaser" v-else>
<view style="" class="purchaser-title">
<span @click="actionIndexChange(0)" :class="actionIndex==0?'active':'noactive'" >现货交易</span>
<span @click="actionIndexChange(1)" :class="actionIndex==1?'active':'noactive'">期货交易</span>
</view>
<view class="productList">
<productList :productList="productList.records"/>
</view>
</view>
</view>
<tabber select="2"/>
</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";
export default {
components: {
ProductList,
topbar,
tabber,
},
computed: {
...mapGetters(['userShop']),
},
data() {
return {
productList: {
records: [
{}
],
total: 0,
},
actionIndex: 0,
}
},
methods: {
// 切换tab
actionIndexChange(index){
// index为0时切换到现货交易，index为1时切换到期货交易
this.actionIndex = index;
},
}
}
</script>
<style scoped lang="scss">
.trading-platform {
.frame {
.chart {
border: 1px solid red;
height: 250rpx;
}
.supplier {
padding: 20rpx 0;
}
.purchaser {
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>

+ 365
- 0
pages_order/auth/registerShop.vue View File

@ -0,0 +1,365 @@
<template>
<view class="registerShop">
<navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack"/>
<view class="frame">
<!--基本信息-->
<view class="basicInfo">
<view class="item">
<view>用户名</view>
<view>
<input v-model="form.name" placeholder="请输入用户名称" clearable></input>
</view>
</view>
<view class="item">
<view>密码</view>
<view>
<input v-model="form.userName" password clearable placeholder="请输入您的密码" clearable></input>
</view>
</view>
<view class="item">
<view>公司名称</view>
<view>
<input v-model="form.phone" type="number" placeholder="请输入公司名称" clearable></input>
</view>
</view>
<view class="item">
<view>税收编码</view>
<view>
<input v-model="form.address" placeholder="请输入税收编码" clearable></input>
</view>
</view>
<view class="item">
<view>公司地址</view>
<view>
<input v-model="form.address" placeholder="请输入开户行名称" clearable></input>
</view>
</view>
<view class="item">
<view>联系电话</view>
<view>
<input v-model="form.address" placeholder="请输入联系电话" clearable></input>
</view>
</view>
<view class="item">
<view>公司账户</view>
<view>
<input v-model="form.address" placeholder="请输入公司账户" clearable></input>
</view>
</view>
<view class="item">
<view>开户行</view>
<view>
<input v-model="form.address" placeholder="请输入开户行名称" clearable></input>
</view>
</view>
<view class="item">
<view>税收编码</view>
<view>
<input v-model="form.address" placeholder="详细地址" clearable></input>
</view>
</view>
</view>
<!--证件信息-->
<view class="certificateInfo">
<!--营业执照-->
<view class="certificateInfoItem">
<view class="title">
<span
style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
<span>营业执照</span>
</view>
<view class="upload">
<uv-upload
:fileList="yyzzfileList"
:maxCount="4"
multiple
width="150rpx"
height="150rpx"
@delete="(file) => deleteImage(0, file)"
@afterRead="(file) => afterRead(0, file)"
:previewFullImage="true"></uv-upload>
</view>
</view>
<!--基本户信息-->
<view class="certificateInfoItem">
<view class="title">
<span
style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
<span>基本户信息</span>
</view>
<view class="upload">
<uv-upload
:fileList="jbhxxfileList"
:maxCount="4"
multiple
width="150rpx"
height="150rpx"
@delete="(file) => deleteImage(1, file)"
@afterRead="(file) => afterRead(1, file)"
:previewFullImage="true"></uv-upload>
</view>
</view>
<!--收款银行-->
<view class="certificateInfoItem">
<view class="title">
<span
style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
<span>收款银行</span>
</view>
<view class="upload">
<uv-upload
:fileList="skyhfileList"
:maxCount="4"
multiple
width="150rpx"
height="150rpx"
@delete="(file) => deleteImage(2, file)"
@afterRead="(file) => afterRead(2, file)"
:previewFullImage="true"></uv-upload>
</view>
</view>
</view>
</view>
<view class="bottom">
<view class="btns">
<span @click="applyReview" class="sqsh">
申请审核
</span>
<span @click="contactUs" class="lxwm">
联系我们
</span>
</view>
<view class="others">
<span @click="applyReview" class="zcxz">
注册须知
</span>
<span @click="contactUs" class="kjhtyl">
框架合同预览
</span>
</view>
</view>
</view>
</template>
<script>
export default {
onLoad(option) {
this.titleIndex = option.identity
},
data() {
return {
titleIndex: 0,
titleList: ['采购商注册', '供应商注册'],
form: {
userName: '',
name: '',
phone: '',
currentRegion: '',
address: '',
latitude: '',
longitude: '',
},
yyzzfileList: [],
jbhxxfileList: [],
skyhfileList: [],
}
},
methods: {
// 申请审核
applyReview() {
},
// 联系我们
contactUs() {
},
// 上传图片
afterRead(type, e) {
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
if (type == 0) {
self.yyzzfileList.push({url})
} else if (type == 1) {
self.jbhxxfileList.push({url})
} else if (type == 2) {
self.skyhfileList.push({url})
}
})
})
},
// 删除图片
deleteImage(type, e) {
console.log(e, type, "===========")
if (type == 0) {
this.yyzzfileList.splice(e.index, 1)
} else if (type == 1) {
this.jbhxxfileList.splice(e.index, 1)
} else if (type == 2) {
this.skyhfileList.splice(e.index, 1)
}
},
}
}
</script>
<style scoped lang="scss">
.registerShop {
.frame {
height: 79vh;
overflow: auto;
.basicInfo {
display: flex;
flex-direction: column;
gap: 5rpx;
background-color: #FFF;
margin-top: 20rpx;
padding: 20rpx;
.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: #f5f5f5;
font-size: 28rpx;
padding: 16rpx 8rpx 16rpx 15rpx;
}
}
}
}
.certificateInfo {
display: flex;
flex-direction: column;
gap: 20rpx;
background-color: #FFF;
margin-top: 20rpx;
padding: 20rpx;
.certificateInfoItem {
.title {
display: flex;
// padding-top: 40rpx;
font-size: 30rpx;
font-weight: 700;
padding: 0 0 0 20rpx;
> 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;
}
}
.upload {
margin: 5rpx 0 0 40rpx;
}
}
}
}
.bottom {
position: fixed;
bottom: 10rpx;
left: 0;
right: 0;
background-color: #FFF;
.btns {
display: flex;
justify-content: center;
align-items: center;
gap: 40rpx;
.sqsh {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
height: 70rpx;
border-radius: 40rpx;
color: white;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #293143;
//margin-top: 20rpx;
border-radius: 40rpx;
}
.lxwm {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
height: 70rpx;
border-radius: 40rpx;
color: #000000;
font-size: 28rpx;
margin: 20rpx 10rpx 0 0;
background: #f2f2f2;
//margin-top: 20rpx;
border-radius: 40rpx;
}
}
.others {
display: flex;
justify-content: center;
align-items: center;
gap: 200rpx;
color: #707070;
font-size: 24rpx;
.zcxz {
text-decoration: underline;
}
.kjhtyl {
text-decoration: underline;
}
}
}
}
</style>

+ 94
- 0
pages_order/auth/selectionIdentity.vue View File

@ -0,0 +1,94 @@
<template>
<view>
<navbar title="选择身份" leftClick @leftClick="$utils.navigateBack" />
<view class="container">
<view class="title">请选择你的身份</view>
<view class="button-group">
<!--供应商-->
<view class="identity-button" @click="selectIdentity(0)">
<view class="identity-text">我是采购商</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">我是供应商</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}`
})
},
}
}
</script>
<style scoped lang="scss">
* {
box-sizing: border-box;
}
.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;
}
.button-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
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-text {
font-size: 40rpx;
}
.identity-icon {
width: 130rpx;
height: 130rpx;
}
}
}
}
</style>

BIN
static/image/index/1.png View File

Before After
Width: 1125  |  Height: 630  |  Size: 318 KiB

BIN
static/image/index/2.png View File

Before After
Width: 806  |  Height: 686  |  Size: 344 KiB

BIN
static/image/index/3.png View File

Before After
Width: 1167  |  Height: 692  |  Size: 618 KiB

BIN
static/image/index/4.png View File

Before After
Width: 847  |  Height: 407  |  Size: 155 KiB

BIN
static/image/index/5.png View File

Before After
Width: 267  |  Height: 267  |  Size: 16 KiB

BIN
static/image/index/6.png View File

Before After
Width: 267  |  Height: 267  |  Size: 15 KiB

BIN
static/image/tabbar/Trading-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 522 B

BIN
static/image/tabbar/cart-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 958 B

BIN
static/image/tabbar/cart.png View File

Before After
Width: 40  |  Height: 40  |  Size: 953 B

BIN
static/image/tabbar/category-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 1.1 KiB

BIN
static/image/tabbar/category.png View File

Before After
Width: 40  |  Height: 40  |  Size: 1.2 KiB

BIN
static/image/tabbar/center-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 915 B Width: 40  |  Height: 40  |  Size: 803 B

BIN
static/image/tabbar/center.png View File

Before After
Width: 40  |  Height: 40  |  Size: 937 B

BIN
static/image/tabbar/clearanceService-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 625 B

BIN
static/image/tabbar/home-a.png View File

Before After
Width: 47  |  Height: 43  |  Size: 2.2 KiB

BIN
static/image/tabbar/home.png View File

Before After
Width: 47  |  Height: 43  |  Size: 2.2 KiB

BIN
static/image/tabbar/index-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 774 B

BIN
static/image/tabbar/order-a.png View File

Before After
Width: 40  |  Height: 40  |  Size: 691 B

BIN
static/image/tabbar/order.png View File

Before After
Width: 40  |  Height: 40  |  Size: 736 B

BIN
static/image/tabbar/组 46940_1.png View File

Before After
Width: 20  |  Height: 20  |  Size: 276 B

BIN
static/image/tradingPlatform/1.png View File

Before After
Width: 548  |  Height: 361  |  Size: 135 KiB

+ 1
- 1
uni.scss View File

@ -12,7 +12,7 @@
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
$uni-color: #FD5100;
$uni-color: #1f1c39;
/* 行为相关颜色 */
$uni-color-primary: #007aff;


Write Preview
Loading…
Cancel
Save