选择身份 采购商/供应商注册 首页 现货/期货交易

components/base/tabbar.vue

@@ -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>

components/base/topbar.vue

@@ -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>

components/user/productList.vue

@@ -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>

locale/en.json

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

locale/zh-Hans.json

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

pages.json

@@ -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"
 			},

pages/index/index.vue

@@ -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>

pages/index/tradingPlatform.vue

@@ -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>

pages_order/auth/registerShop.vue

@@ -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>

pages_order/auth/selectionIdentity.vue

@@ -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>

uni.scss

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