From 65d70f4039e141f1238d855f3b7803b03a5d43ca Mon Sep 17 00:00:00 2001
From: gxwebsoft <Websoft5386339>
Date: Thu, 30 Nov 2023 23:02:58 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B4=AD=E4=B9=B0?=
 =?UTF-8?q?=E4=BC=9A=E5=91=98=E9=A1=B5=E9=9D=A2=E3=80=81=E5=A2=9E=E5=80=BC?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/checkout/checkout.vue      | 339 +------------------------------
 pages/index/index.vue            |   1 +
 pages/notify/notify.vue          |  22 ++
 pages/user/components/added.vue  | 317 +++++++++++++++++++++++++++++
 pages/user/components/equity.vue |  71 +++----
 pages/user/components/grade.vue  | 303 +++++++++++++++++++++++++++
 pages/user/user.vue              |  20 +-
 7 files changed, 696 insertions(+), 377 deletions(-)
 create mode 100644 pages/notify/notify.vue
 create mode 100644 pages/user/components/added.vue
 create mode 100644 pages/user/components/grade.vue

diff --git a/pages/checkout/checkout.vue b/pages/checkout/checkout.vue
index 1a82e44..beee1b5 100644
--- a/pages/checkout/checkout.vue
+++ b/pages/checkout/checkout.vue
@@ -1,350 +1,13 @@
 <template>
     <view>
-        <top-bar></top-bar>
-        <common-header></common-header>
-        <category-bar alwaysShowCategory></category-bar>
-
-        <!-- banner -->
-        <view class="banner-outer">
-            <el-carousel height="365px">
-                <el-carousel-item v-for="item in 4" :key="item">
-                    <image class="carousel-img"
-                           src="http://jyx.gxwebsoft.com/uploads/20210521/336a76fbf9fe44a07b5cfd4caf6f8bb9.jpg"
-                           mode="scaleToFill"></image>
-                </el-carousel-item>
-            </el-carousel>
-        </view>
-        <!-- banner下 -->
-        <div class="group-inner3">
-            <div class="group-inner3-list">
-                <a href="/support/brand.html" rel="nofollow" target="_blank">
-                    <div class="group-inner3-listleft">
-                        <h2>厂家直营</h2>
-                        <p>产地货源 正规优价</p>
-                    </div>
-                    <div class="group-inner3-listright">
-                        <img src="/static/images/home1.png">
-                    </div>
-                </a>
-            </div>
-
-            <div class="group-inner3-list">
-                <a href="/market/index.html" rel="nofollow" target="_blank">
-                    <div class="group-inner3-listleft">
-                        <h2>采购·找现货</h2>
-                        <p>专属采购助手<br>
-                            为您匹配优质供应商</p>
-                    </div>
-                    <div class="group-inner3-listright">
-                        <img src="/static/images/home2.png">
-                    </div>
-                </a>
-            </div>
-
-            <div class="group-inner3-list">
-                <a href="/yellowpage/index.html" rel="nofollow" target="_blank">
-                    <div class="group-inner3-listleft">
-                        <h2>供应·找买家 </h2>
-                        <p>快速发布您的产品<br>
-                            让网上生意变的如此简单</p>
-                    </div>
-                    <div class="group-inner3-listright">
-                        <img src="/static/images/home3.png">
-                    </div>
-                </a>
-            </div>
-        </div>
-
-        <div style="clear:both;width: 100%;"></div>
-
-        <!-- 询价列表 start -->
-        <view class="enquiry-outer">
-            <view class="" style="height: 40px;"></view>
-            <el-divider>
-                <view class="divider-text">最新询价信息</view>
-            </el-divider>
-            <view class="" style="height: 40px;"></view>
-            <div class="mod-inner2Listcenter clearfix sliper">
-                <ul class="clearfix">
-                    <li v-for="(item, index) in enquirySheetData" class="inli-mask" :key="index">
-                        <a href="javascript:void(0)" style="display: block;" rel="nofollow" target="_blank">
-                            <div class="detail">
-                                <div class="detail-kind clearfix">
-                                    <div class="tag">报价中</div>
-                                    <div class="kind"><span>{{ item.answerNumber || 0 }}</span>家已报价</div>
-                                </div>
-                                <div class="detail-infor">
-                                    <!-- <span>{{item.}}</span><span>{{}}支</span> -->
-                                </div>
-                                <div class="detail-num">
-                                    <span v-if="item.user.accountType === 1"
-                                          class="company">{{ item.user.person.personName }}</span>
-                                    <span v-if="item.user.accountType === 2"
-                                          class="company">{{ item.user.company.companyName }}</span>
-                                    <span class="time">{{ item._add_time_str }}</span>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-
-                    <div style="clear:both;width: 100%;">查看更多</div>
-                </ul>
-            </div>
-        </view>
-        <!-- 询价列表 end -->
-
-        <!-- 现货市场 start -->
-        <view class="" style="height: 40px;"></view>
-        <view class="spot-outer">
-            <el-divider>
-                <view class="spot-divider-text">现货市场</view>
-            </el-divider>
-            <view class="" style="height: 40px;"></view>
-            <view class="goods-list">
-                <view v-for="(item, index) in spotGoodsData" :key="index" class="goods">
-                    <view class="goods-title">{{ item.name }}</view>
-                    <view class="goods-stock">库存：{{ item.stock }}吨</view>
-                    <view class="goods-address">供货地：{{ item.addressStr }}</view>
-                    <view class="goods-image">
-                        <image :src="item.user.businessCard.logo" mode="aspectFit"></image>
-                    </view>
-                    <view v-if="item.user.accountType === 1" class="goods-company">{{ item.user.person.personName }}
-                    </view>
-                    <view v-if="item.user.accountType === 2" class="goods-company">{{ item.user.company.companyName }}
-                    </view>
-                    <el-button class="empty-bg-plain-btn" @click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);"
-                               type="primary" plain size="small">立即查看
-                    </el-button>
-                </view>
-            </view>
-            <view class="text-center">
-                <el-button>查看更多</el-button>
-            </view>
-        </view>
-        <!-- 现货市场 end -->
-        <gap height="100"/>
-        <common-footer></common-footer>
+        
     </view>
 </template>
 
 
 <script>
 
-var vk = uni.vk;
-export default {
-    data() {
-        // 页面数据变量
-        return {
-            // init请求返回的数据
-            spotGoodsData: [],
-            enquirySheetData: [],
-            data: {},
-            // 表单请求数据
-            form1: {},
-            scrollTop: 0,
-        }
-    },
-    onPageScroll(e) {
-        this.scrollTop = e.scrollTop;
-    },
-    // 监听 - 页面每次【加载时】执行(如：前进)
-    onLoad(options = {}) {
-        vk = uni.vk;
-        this.options = options;
-        this.init(options);
-    },
-    // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
-    onReady() {
-
-    },
-    // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
-    onShow() {
-
-    },
-    // 监听 - 页面每次【隐藏时】执行(如：返回)
-    onHide() {
-
-    },
-    // 监听 - 点击右上角转发时
-    onShareAppMessage(options) {
-
-    },
-    // 函数
-    methods: {
-        getSpotGoods() {
-            vk.callFunction({
-                url: 'client/spot/goods/pub/getList',
-                loading: false,
-                data: {
-                    pageIndex: 1,
-                    pageSize: 10,
-                },
-                success: (data) => {
-                    console.log('data: ', data);
-                    data.rows.forEach(item => {
-                        try {
-                            item.addressStr = item.address.province.name + "-" + item.address.city
-                                .name + "-" + item.address.area.name
-                        } catch (err) {
-                            item.addressStr = ""
-                        }
-                    })
-                    this.spotGoodsData = data.rows
-                }
-            });
-        },
-        getEnquirySheetList() {
-            vk.callFunction({
-                url: 'client/enquiry/sheet/pub/getList',
-                loading: false,
-                data: {
-                    pageIndex: 1,
-                    pageSize: 10,
-                },
-                success: (data) => {
-
-                    this.enquirySheetData = data.rows
-                }
-            });
-        },
-        // 页面数据初始化函数
-        init(options) {
-            this.getSpotGoods()
-            this.getEnquirySheetList()
-        },
-        pageTo(path) {
-            vk.navigateTo(path);
-        }
-    },
-    // 监听器
-    watch: {},
-    // 计算属性
-    computed: {}
-}
 </script>
 <style lang="scss" scoped>
-.banner-outer {
-}
 
-.carousel-img {
-    width: 760px;
-    height: 365px;
-    margin: 0 auto;
-}
-
-.el-divider__text {
-    background-color: initial;
-}
-
-.el-carousel__item {
-    text-align: center;
-}
-
-.divider-text {
-    color: #393735;
-    font-size: 28px;
-    padding: 0 20px;
-    background-color: #f4f4f4;
-    font-weight: bold;
-}
-
-.spot-divider-text {
-    color: #393735;
-    font-size: 28px;
-    font-weight: bold;
-    padding: 0 20px;
-    background-color: white;
-}
-
-.enquiry-outer {
-    width: 1200px;
-    margin: 0px auto;
-}
-
-.enquiry-outer .mod-inner2Listcenter {
-
-    padding: 20px 0;
-}
-
-.spot-outer {
-    width: 1200px;
-    margin: 0px auto;
-    background-color: white;
-    padding: 50px;
-}
-
-.goods-list {
-
-    display: flex;
-
-}
-
-.goods {
-    width: 217px;
-    //height: 280px;
-    background-color: #FFFFFF;
-    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
-    text-align: center;
-    margin-right: 20px;
-    margin-bottom: 25px;
-    padding: 10px 20px;
-
-    &-title {
-        font-size: 15px;
-        color: #101010;
-        height: 62px;
-        padding-top: 20px;
-        font-weight: bold;
-    }
-
-    &-stock {
-        font-size: 12px;
-        color: #BD3124;
-    }
-
-    &-address {
-        font-size: 12px;
-        margin: 10px 0;
-    }
-
-    &-image {
-        width: 200px;
-        height: 70px;
-        margin: 0 auto;
-
-        image {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    &-company {
-        color: #4F4F4F;
-        font-size: 14px;
-        margin: 10px 0;
-    }
-
-    &-buy {
-        width: 108px;
-        height: 30px;
-        line-height: 30px;
-        background-color: rgba(255, 255, 255, 1);
-        color: rgba(169, 41, 36, 1);
-        font-size: 13px;
-        text-align: center;
-        font-family: Roboto;
-        border: 1px solid rgba(169, 41, 36, 1);
-        margin: 0 auto;
-        cursor: pointer;
-    }
-
-    .goods-image {
-        width: 100%;
-    }
-
-    .goods-address {
-        color: gray;
-    }
-
-}
 </style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 1b0c95c..fc1a7b7 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -149,6 +149,7 @@ export default {
     },
     // 监听 - 页面每次【加载时】执行(如：前进)
     onLoad(options = {}) {
+		console.log(options)
         vk = uni.vk;
         this.options = options;
         this.init(options);
diff --git a/pages/notify/notify.vue b/pages/notify/notify.vue
new file mode 100644
index 0000000..13fb7bf
--- /dev/null
+++ b/pages/notify/notify.vue
@@ -0,0 +1,22 @@
+<template>
+	<view>
+		notify
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/pages/user/components/added.vue b/pages/user/components/added.vue
new file mode 100644
index 0000000..f4ca612
--- /dev/null
+++ b/pages/user/components/added.vue
@@ -0,0 +1,317 @@
+<template>
+	<el-card>
+		<div slot="header" class="clearfix">
+			<span>会员等级</span>
+		</div>
+		<div class="grade-list">
+        <div class="item"  v-for="(item, index) in gradeList" :key="index" :class="index === gradeIndex ? 'active' : ''" @click="onChange(index)">
+          <div class="item-box">
+            <div class="title">{{ item.name }}</div>
+            <div class="info">
+              <text class="price" v-if="item.price">￥{{ item.price }}</text>
+            </div>
+          </div>
+          <div class="select">
+            <div class="icon">
+              <i class="el-icon-check"></i>
+            </div>
+          </div>
+        </div>
+    </div>
+		<div class="payment">
+			<div class="sub-title">支付方式</div>
+			<div class="content">
+				<el-radio-group v-model="paymentIndex" class="ml-4">
+					<el-radio v-for="(item,index) in payment" :key="index" :label="index"
+						size="large">{{ item }}</el-radio>
+				</el-radio-group>
+			</div>
+		</div>
+		<div class="pay-price">
+			<div class="sub-title">支付金额：￥{{ money }}元</div>
+		</div>
+    <div class="pay-price">
+      <div class="sub-desc">购买即代表同意<text>《用户购买协议》</text></div>
+    </div>
+		<div class="pay-price" v-if="billQRCode">
+			<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
+			<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
+			<el-button type="success" @click="onPayStatus">已完成支付</el-button>
+		</div>
+		<el-button v-else type="danger" @click="onPay">立即支付</el-button>
+	</el-card>
+</template>
+
+<script>
+	import UQRCode from 'uqrcodejs';
+	const OpenSdk = require('../lib/base').default;
+	// const OpenSdk = require('ums-sdk-nodejs').default;
+
+	const sdk = new OpenSdk({
+		appId: '10037e6f6823b20801682b6a5e5a0006',
+		appKey: '1c4e3b16066244ae9b236a09e5b312e8'
+	})
+	export default {
+		components: {},
+		data() {
+			return {
+				paymentIndex: 0,
+				payment: ["银联支付"],
+				money: 5000,
+				showQrcode: false,
+				billQRCode: '',
+        gradeIndex: 0,
+        gradeList: [
+          {
+            id: 1,
+            name: '黄金vip',
+            price: 669,
+            comments: ''
+          },
+          {
+            id: 2,
+            name: '铂金vip',
+            price: 1999,
+            comments: ''
+          },
+          {
+            id: 3,
+            name: '钻石vip',
+            price: 2999,
+            comments: ''
+          },
+          {
+            id: 4,
+            name: '实力厂家',
+            price: 20000,
+            comments: ''
+          },
+          {
+            id: 5,
+            name: '实力加工厂',
+            price: 1999,
+            comments: ''
+          },
+          {
+            id: 6,
+            name: '实力采购商',
+            price: 1999,
+            comments: ''
+          }
+        ]
+			}
+		},
+		created() {},
+		methods: {
+			getUserInfo() {
+				vk.userCenter.getCurrentUserInfo({
+					success: (data) => {
+						if (data.userInfo.businessCard) {
+							this.form1.data = data.userInfo.businessCard
+						}
+						// 成功后的逻辑
+						console.log('用户信息: ', data);
+					}
+				});
+
+			},
+			onChange(index) {
+				this.gradeIndex = index
+			},
+			onPay() {
+				const date = new Date()
+				const requestTimestamp = this.dateFormat('YYYY-mm-dd HH:MM:SS', date)
+				const timestamp = this.dateFormat('YYYYmmddHHMMSS', date)
+				console.log(timestamp)
+				console.log(requestTimestamp)
+				let data = {
+					queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
+					timestamp,
+					nonce: 'rp84ufhfn20yneo3tp',
+					content: {
+						requestTimestamp,
+						mid: '898201612345678',
+						tid: '88880001',
+						instMid: 'QRPAYDEFAULT',
+						totalAmount: 1,
+						notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
+					}
+				}
+				/**
+				 * 调用函数
+				 */
+				sdk.exec(data).then(res => {
+					const h = this.$createElement;
+					const result = JSON.parse(res);
+					if (result.errCode === 'SUCCESS') {
+						this.showQrcode = true
+						this.billQRCode = result.billQRCode
+						// this.$alert('', '请打开手机微信，扫一扫完成支付', {
+						//   confirmButtonText: '确定',
+						//   callback: action => {
+						//     this.$message({
+						//       type: 'success',
+						//       message: `已完成支付`
+						//     });
+						//   }
+						// });
+					}
+				})
+			},
+			dateFormat(fmt, date) {
+				const opt = {
+					"Y+": date.getFullYear().toString(), // 年
+					"m+": (date.getMonth() + 1).toString(), // 月
+					"d+": date.getDate().toString(), // 日
+					"H+": date.getHours().toString(), // 时
+					"M+": date.getMinutes().toString(), // 分
+					"S+": date.getSeconds().toString() // 秒
+					// 有其他格式化字符需求可以继续添加，必须转化成字符串
+				};
+				let ret
+				for (let k in opt) {
+					ret = new RegExp("(" + k + ")").exec(fmt)
+					if (ret) {
+						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+					};
+				};
+				return fmt
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.clearfix {
+		font-weight: bold;
+		font-size: 18px;
+	}
+
+	.grade-list {
+		display: flex;
+		flex-direction: column;
+
+		.item {
+			position: relative;
+			border: 1px solid #eee;
+
+			.item-box {
+				display: flex;
+        font-size: 16px;
+
+				.title {
+					padding: 10px;
+					border-right: 1px solid #eee;
+					display: flex;
+					align-items: center;
+					flex: 1;
+					justify-content: center;
+					text-align: center;
+				}
+
+				.info {
+          padding: 10px;
+					display: flex;
+					flex: 1;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					width: 230px;
+
+					.price {
+					}
+
+					.desc {
+						color: #ccc;
+					}
+				}
+			}
+
+			.select {
+				display: none;
+			}
+		}
+
+		.active {
+			border: 2px solid #bf2b28 !important;
+
+			.item-box {
+				.title {
+					color: #bf2b28;
+				}
+
+				.info {
+					.price {
+						color: #bf2b28;
+					}
+
+					.desc {
+						color: #ccc;
+					}
+				}
+			}
+
+			.select {
+				position: absolute;
+				right: 0;
+				bottom: 0;
+				border-top: 20px solid transparent;
+				border-right: 20px solid #bf2b28;
+				border-left: 20px solid transparent;
+				border-bottom: 20px solid #bf2b28;
+				display: flex;
+
+				.icon {
+					position: relative;
+
+					.el-icon-check {
+						position: absolute;
+						left: 0;
+						top: 0;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+
+	.box-card {
+		margin-top: 20px;
+		border: none;
+	}
+
+	.sub-title {
+		color: #bf2b28;
+		font-size: 18px;
+		font-weight: bold;
+		border-left: 5px solid #bf2b28;
+		padding-left: 10px;
+		height: 20px;
+		line-height: 20px;
+		margin: 20px auto;
+	}
+  .sub-desc{
+    color: #808080;
+    margin-bottom: 20px;
+    text{
+      color: #bf2b28;
+    }
+  }
+
+	.bzj-readme {
+		margin-top: 20px;
+	}
+
+	.payment {
+		margin-top: 20px;
+	}
+
+	.pay-price {
+		margin-top: 20px;
+	}
+
+	.pay-desc {
+		font-size: 16px;
+		line-height: 2em;
+	}
+</style>
diff --git a/pages/user/components/equity.vue b/pages/user/components/equity.vue
index 28c7d5b..1a473ca 100644
--- a/pages/user/components/equity.vue
+++ b/pages/user/components/equity.vue
@@ -65,17 +65,17 @@
 		<div class="pay-price">
 			<div class="sub-title">支付金额：￥{{ money }}元</div>
 		</div>
-    <div class="pay-price" v-if="billQRCode">
-      <uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
-      <div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
-	  <el-button type="success" @click="onPay">已完成支付</el-button>
-    </div>
-    <el-button v-else type="danger" @click="onPay">立即支付</el-button>
+		<div class="pay-price" v-if="billQRCode">
+			<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
+			<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
+			<el-button type="success" @click="onPayStatus">已完成支付</el-button>
+		</div>
+		<el-button v-else type="danger" @click="onPay">立即支付</el-button>
 	</el-card>
 </template>
 
 <script>
-  import UQRCode from 'uqrcodejs';
+	import UQRCode from 'uqrcodejs';
 	const OpenSdk = require('../lib/base').default;
 	// const OpenSdk = require('ums-sdk-nodejs').default;
 
@@ -91,11 +91,10 @@
 				payment: ["银联支付"],
 				money: 5000,
 				showQrcode: false,
-        billQRCode: ''
+				billQRCode: ''
 			}
 		},
-		created() {
-		},
+		created() {},
 		methods: {
 			getUserInfo() {
 				vk.userCenter.getCurrentUserInfo({
@@ -127,29 +126,30 @@
 						mid: '898201612345678',
 						tid: '88880001',
 						instMid: 'QRPAYDEFAULT',
-						totalAmount: 1
+						totalAmount: 1,
+						notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
 					}
 				}
-        /**
-         * 调用函数
-         */
-        sdk.exec(data).then(res => {
-          const h = this.$createElement;
-          const result = JSON.parse(res);
-          if (result.errCode === 'SUCCESS') {
-            this.showQrcode = true
-            this.billQRCode = result.billQRCode
-            // this.$alert('', '请打开手机微信，扫一扫完成支付', {
-            //   confirmButtonText: '确定',
-            //   callback: action => {
-            //     this.$message({
-            //       type: 'success',
-            //       message: `已完成支付`
-            //     });
-            //   }
-            // });
-          }
-        })
+				/**
+				 * 调用函数
+				 */
+				sdk.exec(data).then(res => {
+					const h = this.$createElement;
+					const result = JSON.parse(res);
+					if (result.errCode === 'SUCCESS') {
+						this.showQrcode = true
+						this.billQRCode = result.billQRCode
+						// this.$alert('', '请打开手机微信，扫一扫完成支付', {
+						//   confirmButtonText: '确定',
+						//   callback: action => {
+						//     this.$message({
+						//       type: 'success',
+						//       message: `已完成支付`
+						//     });
+						//   }
+						// });
+					}
+				})
 			},
 			dateFormat(fmt, date) {
 				const opt = {
@@ -295,8 +295,9 @@
 	.pay-price {
 		margin-top: 20px;
 	}
-  .pay-desc{
-    font-size: 16px;
-    line-height: 2em;
-  }
+
+	.pay-desc {
+		font-size: 16px;
+		line-height: 2em;
+	}
 </style>
diff --git a/pages/user/components/grade.vue b/pages/user/components/grade.vue
new file mode 100644
index 0000000..f272e5d
--- /dev/null
+++ b/pages/user/components/grade.vue
@@ -0,0 +1,303 @@
+<template>
+	<el-card>
+		<div slot="header" class="clearfix">
+			<span>会员等级</span>
+		</div>
+		<div class="grade-list">
+			<div class="item" :class="money === 5000 ? 'active' : ''" @click="onChange(5000)">
+				<div class="item-box">
+					<div class="title">保证金</div>
+					<div class="info">
+						<text class="price">￥5000</text>
+						<text class="desc">文字信息后台编辑</text>
+					</div>
+				</div>
+				<div class="select">
+					<div class="icon">
+						<i class="el-icon-check"></i>
+					</div>
+				</div>
+			</div>
+			<div class="item" :class="money === 10000 ? 'active' : ''" @click="onChange(10000)">
+				<div class="item-box">
+					<div class="title">保证金</div>
+					<div class="info">
+						<text class="price">￥10000</text>
+						<text class="desc">文字信息后台编辑</text>
+					</div>
+				</div>
+				<div class="select">
+					<div class="icon">
+						<i class="el-icon-check"></i>
+					</div>
+				</div>
+			</div>
+			<div class="item" :class="money === 20000 ? 'active' : ''" @click="onChange(20000)">
+				<div class="item-box">
+					<div class="title">保证金</div>
+					<div class="info">
+						<text class="price">￥20000</text>
+						<text class="desc">文字信息后台编辑</text>
+					</div>
+				</div>
+				<div class="select">
+					<div class="icon">
+						<i class="el-icon-check"></i>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="bzj-readme">
+			<div class="sub-title">保证金说明</div>
+			<div class="content">
+				保证金说明内容...
+			</div>
+		</div>
+		<div class="payment">
+			<div class="sub-title">支付方式</div>
+			<div class="content">
+				<el-radio-group v-model="paymentIndex" class="ml-4">
+					<el-radio v-for="(item,index) in payment" :key="index" :label="index"
+						size="large">{{ item }}</el-radio>
+				</el-radio-group>
+			</div>
+		</div>
+		<div class="pay-price">
+			<div class="sub-title">支付金额：￥{{ money }}元</div>
+		</div>
+		<div class="pay-price" v-if="billQRCode">
+			<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
+			<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
+			<el-button type="success" @click="onPayStatus">已完成支付</el-button>
+		</div>
+		<el-button v-else type="danger" @click="onPay">立即支付</el-button>
+	</el-card>
+</template>
+
+<script>
+	import UQRCode from 'uqrcodejs';
+	const OpenSdk = require('../lib/base').default;
+	// const OpenSdk = require('ums-sdk-nodejs').default;
+
+	const sdk = new OpenSdk({
+		appId: '10037e6f6823b20801682b6a5e5a0006',
+		appKey: '1c4e3b16066244ae9b236a09e5b312e8'
+	})
+	export default {
+		components: {},
+		data() {
+			return {
+				paymentIndex: 0,
+				payment: ["银联支付"],
+				money: 5000,
+				showQrcode: false,
+				billQRCode: ''
+			}
+		},
+		created() {},
+		methods: {
+			getUserInfo() {
+				vk.userCenter.getCurrentUserInfo({
+					success: (data) => {
+						if (data.userInfo.businessCard) {
+							this.form1.data = data.userInfo.businessCard
+						}
+						// 成功后的逻辑
+						console.log('用户信息: ', data);
+					}
+				});
+
+			},
+			onChange(money) {
+				this.money = money
+			},
+			onPay() {
+				const date = new Date()
+				const requestTimestamp = this.dateFormat('YYYY-mm-dd HH:MM:SS', date)
+				const timestamp = this.dateFormat('YYYYmmddHHMMSS', date)
+				console.log(timestamp)
+				console.log(requestTimestamp)
+				let data = {
+					queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
+					timestamp,
+					nonce: 'rp84ufhfn20yneo3tp',
+					content: {
+						requestTimestamp,
+						mid: '898201612345678',
+						tid: '88880001',
+						instMid: 'QRPAYDEFAULT',
+						totalAmount: 1,
+						notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
+					}
+				}
+				/**
+				 * 调用函数
+				 */
+				sdk.exec(data).then(res => {
+					const h = this.$createElement;
+					const result = JSON.parse(res);
+					if (result.errCode === 'SUCCESS') {
+						this.showQrcode = true
+						this.billQRCode = result.billQRCode
+						// this.$alert('', '请打开手机微信，扫一扫完成支付', {
+						//   confirmButtonText: '确定',
+						//   callback: action => {
+						//     this.$message({
+						//       type: 'success',
+						//       message: `已完成支付`
+						//     });
+						//   }
+						// });
+					}
+				})
+			},
+			dateFormat(fmt, date) {
+				const opt = {
+					"Y+": date.getFullYear().toString(), // 年
+					"m+": (date.getMonth() + 1).toString(), // 月
+					"d+": date.getDate().toString(), // 日
+					"H+": date.getHours().toString(), // 时
+					"M+": date.getMinutes().toString(), // 分
+					"S+": date.getSeconds().toString() // 秒
+					// 有其他格式化字符需求可以继续添加，必须转化成字符串
+				};
+				let ret
+				for (let k in opt) {
+					ret = new RegExp("(" + k + ")").exec(fmt)
+					if (ret) {
+						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+					};
+				};
+				return fmt
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.clearfix {
+		font-weight: bold;
+		font-size: 18px;
+	}
+
+	.grade-list {
+		display: flex;
+		justify-content: space-between;
+
+		.item {
+			position: relative;
+			border: 1px solid #eee;
+
+			.item-box {
+				display: flex;
+
+				.title {
+					padding: 10px;
+					border-right: 1px solid #eee;
+					display: flex;
+					align-items: center;
+					width: 40px;
+					justify-content: center;
+					text-align: center;
+				}
+
+				.info {
+					padding: 10px;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					width: 230px;
+
+					.price {
+						font-size: 28px;
+					}
+
+					.desc {
+						color: #ccc;
+					}
+				}
+			}
+
+			.select {
+				display: none;
+			}
+		}
+
+		.active {
+			border: 2px solid #bf2b28 !important;
+
+			.item-box {
+				.title {
+					border-right: 2px solid #bf2b28 !important;
+					color: #bf2b28;
+				}
+
+				.info {
+					.price {
+						color: #bf2b28;
+					}
+
+					.desc {
+						color: #ccc;
+					}
+				}
+			}
+
+			.select {
+				position: absolute;
+				right: 0;
+				bottom: 0;
+				border-top: 20px solid transparent;
+				border-right: 20px solid #bf2b28;
+				border-left: 20px solid transparent;
+				border-bottom: 20px solid #bf2b28;
+				display: flex;
+
+				.icon {
+					position: relative;
+
+					.el-icon-check {
+						position: absolute;
+						left: 0;
+						top: 0;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+
+	.box-card {
+		margin-top: 20px;
+		border: none;
+	}
+
+	.sub-title {
+		color: #bf2b28;
+		font-size: 18px;
+		font-weight: bold;
+		border-left: 5px solid #bf2b28;
+		padding-left: 10px;
+		height: 20px;
+		line-height: 20px;
+		margin: 20px auto;
+	}
+
+	.bzj-readme {
+		margin-top: 20px;
+	}
+
+	.payment {
+		margin-top: 20px;
+	}
+
+	.pay-price {
+		margin-top: 20px;
+	}
+
+	.pay-desc {
+		font-size: 16px;
+		line-height: 2em;
+	}
+</style>
diff --git a/pages/user/user.vue b/pages/user/user.vue
index 13d478f..cb466e3 100644
--- a/pages/user/user.vue
+++ b/pages/user/user.vue
@@ -24,6 +24,14 @@
 								<i class="el-icon-wallet"></i>
 								<span slot="title">平台权益</span>
 							</el-menu-item>
+              <el-menu-item index="grade">
+                <i class="el-icon-user"></i>
+                <span slot="title">会员等级(临时)</span>
+              </el-menu-item>
+              <el-menu-item index="added">
+                <i class="el-icon-medal"></i>
+                <span slot="title">购买增值服务(临时)</span>
+              </el-menu-item>
 						</el-menu>
 				</el-col>
 				<el-col :span="18">
@@ -31,9 +39,11 @@
 					<business-card v-else-if="currMenu === 'business-card'"></business-card>
 					<seal v-else-if="currMenu === 'seal'"></seal>
 					<equity v-else-if="currMenu === 'equity'"></equity>
+					<grade v-else-if="currMenu === 'grade'"></grade>
+          <Added v-else-if="currMenu === 'added'"></Added>
 				</el-col>
 			</el-row>
-	
+
 		</view>
 	</view>
 </template>
@@ -43,9 +53,11 @@
 	import BusinessCard from './components/business-card'
 	import Seal from './components/seal'
 	import Equity from './components/equity'
-	
+	import Grade from './components/grade'
+  import Added from './components/added'
+
 	export default {
-		components: {Personal, BusinessCard, Seal,Equity},
+		components: {Personal, BusinessCard, Seal,Equity, Grade, Added},
 		data() {
 			return {
 				currMenu: 'fadada',
@@ -71,4 +83,4 @@
 		width: 1200px;
 		margin: 20px auto;
 	}
-</style>
\ No newline at end of file
+</style>

From 4fe3719f37e8ec8fe41f0a4d070a0c841d89a3a1 Mon Sep 17 00:00:00 2001
From: gxwebsoft <Websoft5386339>
Date: Thu, 30 Nov 2023 23:12:19 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E8=B4=AD=E4=B9=B0=E5=A2=9E=E5=80=BC?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/components/added.vue | 639 +++++++++++++++++---------------
 1 file changed, 350 insertions(+), 289 deletions(-)

diff --git a/pages/user/components/added.vue b/pages/user/components/added.vue
index f4ca612..d01a21f 100644
--- a/pages/user/components/added.vue
+++ b/pages/user/components/added.vue
@@ -1,317 +1,378 @@
-<template>
-	<el-card>
-		<div slot="header" class="clearfix">
-			<span>会员等级</span>
-		</div>
-		<div class="grade-list">
-        <div class="item"  v-for="(item, index) in gradeList" :key="index" :class="index === gradeIndex ? 'active' : ''" @click="onChange(index)">
-          <div class="item-box">
-            <div class="title">{{ item.name }}</div>
-            <div class="info">
-              <text class="price" v-if="item.price">￥{{ item.price }}</text>
-            </div>
-          </div>
-          <div class="select">
-            <div class="icon">
-              <i class="el-icon-check"></i>
-            </div>
-          </div>
-        </div>
+ <template>
+  <el-card>
+    <div slot="header" class="clearfix">
+      <span>购买增值服务</span>
+    </div>
+    <div class="grade-list">
+      <div class="item">
+        <div class="item-box" style="background-color: #f7f7f7">
+          <div class="title">业务编号</div>
+          <div class="title">服务项目</div>
+          <div class="title">计价方式</div>
+          <div class="title">收费标准</div>
+          <div class="title">检查单位</div>
+          <div class="title">选择服务</div>
+          <div class="title">备注</div>
+        </div>
+      </div>
+      <div class="item" v-for="(item, index) in gradeList" :key="index" @click="onChange(index)">
+        <div class="item-box">
+          <div class="title">{{ item.code }}</div>
+          <div class="title">{{ item.name }}</div>
+          <div class="title">{{ item.type }}</div>
+          <div class="title">{{ item.price }}</div>
+          <div class="title">{{ item.company }}</div>
+          <div class="title"><el-radio v-model="item.select" :label="1" @click.stop="onSelect(index)">{{ item.select === 1 ? '已选' : ''}}</el-radio></div>
+          <div class="title">{{ item.comments }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="payment">
+      <div class="sub-title">支付方式</div>
+      <div class="content">
+        <el-radio-group v-model="paymentIndex" class="ml-4">
+          <el-radio v-for="(item,index) in payment" :key="index" :label="index"
+                    size="large">{{ item }}</el-radio>
+        </el-radio-group>
+      </div>
+    </div>
+    <div class="pay-price">
+      <div class="sub-title">支付金额：￥{{ money }}元</div>
     </div>
-		<div class="payment">
-			<div class="sub-title">支付方式</div>
-			<div class="content">
-				<el-radio-group v-model="paymentIndex" class="ml-4">
-					<el-radio v-for="(item,index) in payment" :key="index" :label="index"
-						size="large">{{ item }}</el-radio>
-				</el-radio-group>
-			</div>
-		</div>
-		<div class="pay-price">
-			<div class="sub-title">支付金额：￥{{ money }}元</div>
-		</div>
     <div class="pay-price">
       <div class="sub-desc">购买即代表同意<text>《用户购买协议》</text></div>
     </div>
-		<div class="pay-price" v-if="billQRCode">
-			<uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
-			<div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
-			<el-button type="success" @click="onPayStatus">已完成支付</el-button>
-		</div>
-		<el-button v-else type="danger" @click="onPay">立即支付</el-button>
-	</el-card>
+    <div class="pay-price" v-if="billQRCode">
+      <uv-qrcode ref="qrcode" size="240px" :value="billQRCode"></uv-qrcode>
+      <div class="pay-desc">请打开手机微信，扫一扫完成支付</div>
+      <el-button type="success" @click="onPayStatus">已完成支付</el-button>
+    </div>
+    <el-button v-else type="danger" @click="onPay">立即支付</el-button>
+  </el-card>
 </template>
 
 <script>
-	import UQRCode from 'uqrcodejs';
-	const OpenSdk = require('../lib/base').default;
-	// const OpenSdk = require('ums-sdk-nodejs').default;
+import UQRCode from 'uqrcodejs';
+const OpenSdk = require('../lib/base').default;
+// const OpenSdk = require('ums-sdk-nodejs').default;
 
-	const sdk = new OpenSdk({
-		appId: '10037e6f6823b20801682b6a5e5a0006',
-		appKey: '1c4e3b16066244ae9b236a09e5b312e8'
-	})
-	export default {
-		components: {},
-		data() {
-			return {
-				paymentIndex: 0,
-				payment: ["银联支付"],
-				money: 5000,
-				showQrcode: false,
-				billQRCode: '',
-        gradeIndex: 0,
-        gradeList: [
-          {
-            id: 1,
-            name: '黄金vip',
-            price: 669,
-            comments: ''
-          },
-          {
-            id: 2,
-            name: '铂金vip',
-            price: 1999,
-            comments: ''
-          },
-          {
-            id: 3,
-            name: '钻石vip',
-            price: 2999,
-            comments: ''
-          },
-          {
-            id: 4,
-            name: '实力厂家',
-            price: 20000,
-            comments: ''
-          },
-          {
-            id: 5,
-            name: '实力加工厂',
-            price: 1999,
-            comments: ''
-          },
-          {
-            id: 6,
-            name: '实力采购商',
-            price: 1999,
-            comments: ''
+const sdk = new OpenSdk({
+  appId: '10037e6f6823b20801682b6a5e5a0006',
+  appKey: '1c4e3b16066244ae9b236a09e5b312e8'
+})
+export default {
+  components: {},
+  data() {
+    return {
+      paymentIndex: 0,
+      payment: ["银联支付"],
+      money: 5000,
+      showQrcode: false,
+      billQRCode: '',
+      gradeIndex: 0,
+      gradeList: [
+        {
+          id: 1,
+          code: 'JJX001',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 1,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 2,
+          code: 'JJX002',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 3,
+          code: 'JJX003',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 4,
+          code: 'JJX004',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 5,
+          code: 'JJX005',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 1,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 6,
+          code: 'JJX006',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 7,
+          code: 'JJX007',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        },
+        {
+          id: 8,
+          code: 'JJX008',
+          name: '供应商实力考查',
+          type: '元/次',
+          price: 150,
+          company: '金久信',
+          select: 0,
+          comments: '实现视频并记录存档，收集相关纸质文件'
+        }
+      ]
+    }
+  },
+  created() {},
+  methods: {
+    getUserInfo() {
+      vk.userCenter.getCurrentUserInfo({
+        success: (data) => {
+          if (data.userInfo.businessCard) {
+            this.form1.data = data.userInfo.businessCard
           }
-        ]
-			}
-		},
-		created() {},
-		methods: {
-			getUserInfo() {
-				vk.userCenter.getCurrentUserInfo({
-					success: (data) => {
-						if (data.userInfo.businessCard) {
-							this.form1.data = data.userInfo.businessCard
-						}
-						// 成功后的逻辑
-						console.log('用户信息: ', data);
-					}
-				});
+          // 成功后的逻辑
+          console.log('用户信息: ', data);
+        }
+      });
 
-			},
-			onChange(index) {
-				this.gradeIndex = index
-			},
-			onPay() {
-				const date = new Date()
-				const requestTimestamp = this.dateFormat('YYYY-mm-dd HH:MM:SS', date)
-				const timestamp = this.dateFormat('YYYYmmddHHMMSS', date)
-				console.log(timestamp)
-				console.log(requestTimestamp)
-				let data = {
-					queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
-					timestamp,
-					nonce: 'rp84ufhfn20yneo3tp',
-					content: {
-						requestTimestamp,
-						mid: '898201612345678',
-						tid: '88880001',
-						instMid: 'QRPAYDEFAULT',
-						totalAmount: 1,
-						notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
-					}
-				}
-				/**
-				 * 调用函数
-				 */
-				sdk.exec(data).then(res => {
-					const h = this.$createElement;
-					const result = JSON.parse(res);
-					if (result.errCode === 'SUCCESS') {
-						this.showQrcode = true
-						this.billQRCode = result.billQRCode
-						// this.$alert('', '请打开手机微信，扫一扫完成支付', {
-						//   confirmButtonText: '确定',
-						//   callback: action => {
-						//     this.$message({
-						//       type: 'success',
-						//       message: `已完成支付`
-						//     });
-						//   }
-						// });
-					}
-				})
-			},
-			dateFormat(fmt, date) {
-				const opt = {
-					"Y+": date.getFullYear().toString(), // 年
-					"m+": (date.getMonth() + 1).toString(), // 月
-					"d+": date.getDate().toString(), // 日
-					"H+": date.getHours().toString(), // 时
-					"M+": date.getMinutes().toString(), // 分
-					"S+": date.getSeconds().toString() // 秒
-					// 有其他格式化字符需求可以继续添加，必须转化成字符串
-				};
-				let ret
-				for (let k in opt) {
-					ret = new RegExp("(" + k + ")").exec(fmt)
-					if (ret) {
-						fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
-					};
-				};
-				return fmt
-			}
-		}
-	}
+    },
+    onChange(index) {
+      this.gradeIndex = index
+    },
+    onSelect(index){
+      if(this.gradeList[index].select === 1){
+        this.gradeList[index].select = 0
+      }else{
+        this.gradeList[index].select = 1
+      }
+    },
+    onPay() {
+      const date = new Date()
+      const requestTimestamp = this.dateFormat('YYYY-mm-dd HH:MM:SS', date)
+      const timestamp = this.dateFormat('YYYYmmddHHMMSS', date)
+      console.log(timestamp)
+      console.log(requestTimestamp)
+      let data = {
+        queryUrl: 'https://test-api-open.chinaums.com/v1/netpay/bills/get-qrcode',
+        timestamp,
+        nonce: 'rp84ufhfn20yneo3tp',
+        content: {
+          requestTimestamp,
+          mid: '898201612345678',
+          tid: '88880001',
+          instMid: 'QRPAYDEFAULT',
+          totalAmount: 1,
+          notifyUrl: 'https://static-mp-0737e52b-fffa-4223-bcdf-d4ad3d9968a5.next.bspapp.com/#/'
+        }
+      }
+      /**
+       * 调用函数
+       */
+      sdk.exec(data).then(res => {
+        const h = this.$createElement;
+        const result = JSON.parse(res);
+        if (result.errCode === 'SUCCESS') {
+          this.showQrcode = true
+          this.billQRCode = result.billQRCode
+          // this.$alert('', '请打开手机微信，扫一扫完成支付', {
+          //   confirmButtonText: '确定',
+          //   callback: action => {
+          //     this.$message({
+          //       type: 'success',
+          //       message: `已完成支付`
+          //     });
+          //   }
+          // });
+        }
+      })
+    },
+    dateFormat(fmt, date) {
+      const opt = {
+        "Y+": date.getFullYear().toString(), // 年
+        "m+": (date.getMonth() + 1).toString(), // 月
+        "d+": date.getDate().toString(), // 日
+        "H+": date.getHours().toString(), // 时
+        "M+": date.getMinutes().toString(), // 分
+        "S+": date.getSeconds().toString() // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+      };
+      let ret
+      for (let k in opt) {
+        ret = new RegExp("(" + k + ")").exec(fmt)
+        if (ret) {
+          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+        };
+      };
+      return fmt
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	.clearfix {
-		font-weight: bold;
-		font-size: 18px;
-	}
+.clearfix {
+  font-weight: bold;
+  font-size: 18px;
+}
 
-	.grade-list {
-		display: flex;
-		flex-direction: column;
+.grade-list {
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
 
-		.item {
-			position: relative;
-			border: 1px solid #eee;
+  .item {
+    position: relative;
+    border: 1px solid #eee;
 
-			.item-box {
-				display: flex;
-        font-size: 16px;
+    .item-box {
+      display: flex;
+      font-size: 16px;
 
-				.title {
-					padding: 10px;
-					border-right: 1px solid #eee;
-					display: flex;
-					align-items: center;
-					flex: 1;
-					justify-content: center;
-					text-align: center;
-				}
+      .title {
+        padding: 10px;
+        border-right: 1px solid #eee;
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: center;
+        text-align: center;
+      }
 
-				.info {
-          padding: 10px;
-					display: flex;
-					flex: 1;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					width: 230px;
+      .info {
+        padding: 10px;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 230px;
 
-					.price {
-					}
+        .price {
+        }
 
-					.desc {
-						color: #ccc;
-					}
-				}
-			}
+        .desc {
+          color: #ccc;
+        }
+      }
+    }
 
-			.select {
-				display: none;
-			}
-		}
-
-		.active {
-			border: 2px solid #bf2b28 !important;
-
-			.item-box {
-				.title {
-					color: #bf2b28;
-				}
-
-				.info {
-					.price {
-						color: #bf2b28;
-					}
-
-					.desc {
-						color: #ccc;
-					}
-				}
-			}
-
-			.select {
-				position: absolute;
-				right: 0;
-				bottom: 0;
-				border-top: 20px solid transparent;
-				border-right: 20px solid #bf2b28;
-				border-left: 20px solid transparent;
-				border-bottom: 20px solid #bf2b28;
-				display: flex;
-
-				.icon {
-					position: relative;
-
-					.el-icon-check {
-						position: absolute;
-						left: 0;
-						top: 0;
-						color: #fff;
-					}
-				}
-			}
-		}
-	}
-
-	.box-card {
-		margin-top: 20px;
-		border: none;
-	}
-
-	.sub-title {
-		color: #bf2b28;
-		font-size: 18px;
-		font-weight: bold;
-		border-left: 5px solid #bf2b28;
-		padding-left: 10px;
-		height: 20px;
-		line-height: 20px;
-		margin: 20px auto;
-	}
-  .sub-desc{
-    color: #808080;
-    margin-bottom: 20px;
-    text{
-      color: #bf2b28;
+    .select {
+      display: none;
     }
   }
 
-	.bzj-readme {
-		margin-top: 20px;
-	}
+  .active {
+    border: 2px solid #bf2b28 !important;
 
-	.payment {
-		margin-top: 20px;
-	}
+    .item-box {
+      .title {
+        color: #bf2b28;
+      }
 
-	.pay-price {
-		margin-top: 20px;
-	}
+      .info {
+        .price {
+          color: #bf2b28;
+        }
 
-	.pay-desc {
-		font-size: 16px;
-		line-height: 2em;
-	}
+        .desc {
+          color: #ccc;
+        }
+      }
+    }
+
+    .select {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      border-top: 20px solid transparent;
+      border-right: 20px solid #bf2b28;
+      border-left: 20px solid transparent;
+      border-bottom: 20px solid #bf2b28;
+      display: flex;
+
+      .icon {
+        position: relative;
+
+        .el-icon-check {
+          position: absolute;
+          left: 0;
+          top: 0;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.box-card {
+  margin-top: 20px;
+  border: none;
+}
+
+.sub-title {
+  color: #bf2b28;
+  font-size: 18px;
+  font-weight: bold;
+  border-left: 5px solid #bf2b28;
+  padding-left: 10px;
+  height: 20px;
+  line-height: 20px;
+  margin: 20px auto;
+}
+.sub-desc{
+  color: #808080;
+  margin-bottom: 20px;
+  text{
+    color: #bf2b28;
+  }
+}
+
+.bzj-readme {
+  margin-top: 20px;
+}
+
+.payment {
+  margin-top: 20px;
+}
+
+.pay-price {
+  margin-top: 20px;
+}
+
+.pay-desc {
+  font-size: 16px;
+  line-height: 2em;
+}
 </style>

From ed053e2eac130094b2b3e69d3c98568091a5ee04 Mon Sep 17 00:00:00 2001
From: gxwebsoft <Websoft5386339>
Date: Fri, 1 Dec 2023 02:03:39 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=87=AA=E8=90=A5?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E3=80=81=E5=B9=B3=E5=8F=B0=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E3=80=81=E7=89=B9=E4=BA=A7=E5=95=86=E5=9F=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/category-bar/category-bar.vue  |   4 +-
 pages.json                                |  70 +++--
 pages/index/self-support/self-support.vue | 366 ++++++++++++++++++++++
 pages/index/server/server.vue             | 366 ++++++++++++++++++++++
 pages/index/shop/shop.vue                 | 366 ++++++++++++++++++++++
 5 files changed, 1147 insertions(+), 25 deletions(-)
 create mode 100644 pages/index/self-support/self-support.vue
 create mode 100644 pages/index/server/server.vue
 create mode 100644 pages/index/shop/shop.vue

diff --git a/components/category-bar/category-bar.vue b/components/category-bar/category-bar.vue
index de33579..18113f6 100644
--- a/components/category-bar/category-bar.vue
+++ b/components/category-bar/category-bar.vue
@@ -59,7 +59,7 @@
                                 <li class="nav ">
                                     <a href="/">首页</a>
                                 </li>
-                                <li class="nav ">
+                                <li class="nav" @click="navTo('/pages/index/self-support/self-support')">
                                     <a href="javascript:;">金久信自营</a>
                                 </li>
                                 <li @click="navTo('/pages/spot/goods/goods')" class="nav"
@@ -366,4 +366,4 @@ export default {
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages.json b/pages.json
index 29f2581..5712835 100644
--- a/pages.json
+++ b/pages.json
@@ -14,52 +14,52 @@
 		}
 	    ,{
             "path" : "pages/auth/register/register",
-            "style" :                                                                                    
+            "style" :
             {
                 "navigationBarTitleText": "注册",
                 "enablePullDownRefresh": false
             }
-            
+
         }
         ,{
             "path" : "pages/auth/login/login",
-            "style" :                                                                                    
+            "style" :
             {
                 "navigationBarTitleText": "登录",
                 "enablePullDownRefresh": false
             }
-            
+
         }
         ,{
             "path" : "pages/spot/release/release",
-            "style" :                                                                                    
+            "style" :
             {
                 "navigationBarTitleText": "发布现货",
                 "enablePullDownRefresh": false
             }
-            
+
         }
         ,{
             "path" : "pages/spot/goods/goods",
-            "style" :                                                                                    
+            "style" :
             {
                 "navigationBarTitleText": "现货市场",
                 "enablePullDownRefresh": false
             }
-            
+
         }
         ,{
             "path" : "pages/user/user",
-            "style" :                                                                                    
+            "style" :
             {
                 "navigationBarTitleText": "个人中心",
                 "enablePullDownRefresh": false
             }
-            
+
         },
         {
         	"path" : "pages/spot/goods/detail",
-        	"style" : 
+        	"style" :
         	{
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
@@ -67,7 +67,7 @@
         },
         {
         	"path" : "pages/company/company",
-        	"style" : 
+        	"style" :
         	{
         		"navigationBarTitleText" : "黄页",
         		"enablePullDownRefresh" : false
@@ -75,7 +75,7 @@
         },
         {
         	"path" : "pages/enquiry/release",
-        	"style" : 
+        	"style" :
         	{
         		"navigationBarTitleText" : "发布询价",
         		"enablePullDownRefresh" : false
@@ -83,7 +83,7 @@
         },
         {
         	"path" : "pages/enquiry/list",
-        	"style" : 
+        	"style" :
         	{
         		"navigationBarTitleText" : "询价",
         		"enablePullDownRefresh" : false
@@ -91,7 +91,7 @@
         },
 		{
 			"path" : "pages/enquiry/my",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "我发布的询价单",
 				"enablePullDownRefresh" : false
@@ -99,7 +99,7 @@
 		},
         {
         	"path" : "pages/enquiry/detail",
-        	"style" : 
+        	"style" :
         	{
         		"navigationBarTitleText" : "报价单详情",
         		"enablePullDownRefresh" : false
@@ -107,7 +107,7 @@
         },
         {
         	"path" : "pages/enquiry/quote",
-        	"style" : 
+        	"style" :
         	{
         		"navigationBarTitleText" : "填写报价单",
         		"enablePullDownRefresh" : false
@@ -115,7 +115,7 @@
         },
 		{
 			"path" : "pages/contract/index",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "合同管理",
 				"enablePullDownRefresh" : false
@@ -123,7 +123,7 @@
 		},
 		{
 			"path" : "pages/process/list",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "找加工",
 				"enablePullDownRefresh" : false
@@ -131,7 +131,7 @@
 		},
 		{
 			"path" : "pages/process/release",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "发布找加工",
 				"enablePullDownRefresh" : false
@@ -139,7 +139,7 @@
 		},
 		{
 			"path" : "pages/process/quote",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "加工报价",
 				"enablePullDownRefresh" : false
@@ -147,7 +147,7 @@
 		},
 		{
 			"path" : "pages/process/detail",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "加工单详情",
 				"enablePullDownRefresh" : false
@@ -163,7 +163,7 @@
         },
         {
         	"path" : "pages/checkout/checkout",
-        	"style" : 
+        	"style" :
         	{
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
@@ -176,6 +176,30 @@
                 "navigationBarTitleText" : "金久信学堂",
                 "enablePullDownRefresh" : false
             }
+        },
+        {
+        	"path" : "pages/index/self-support/self-support",
+        	"style" :
+        	{
+        		"navigationBarTitleText" : "金久信自营",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/index/server/server",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "平台服务",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/index/shop/shop",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
     ],
 	"globalStyle": {
diff --git a/pages/index/self-support/self-support.vue b/pages/index/self-support/self-support.vue
new file mode 100644
index 0000000..8f34645
--- /dev/null
+++ b/pages/index/self-support/self-support.vue
@@ -0,0 +1,366 @@
+<template>
+	<view>
+		<top-bar></top-bar>
+		<common-header></common-header>
+		<category-bar></category-bar>
+		<view class="w-1200">
+			<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
+			<view class="test">
+				<text @click="navTo('/pages/index/self-support/self-support')">自营钢城</text>
+				<text @click="navTo('/pages/index/server/server')">平台服务</text>
+				<text @click="navTo('/pages/index/shop/shop')">特产商城</text>
+			</view>
+      <view class="tool-bar">
+        <view class="search">
+          <text>交易区域：</text>
+          <el-cascader :options="options">
+            <template slot-scope="{ node, data }">
+              <span>{{ data.label }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </view>
+        <view class="buy-btn">
+          <u-button type="error" plain>下单询价</u-button>
+        </view>
+      </view>
+      <!-- 合作单位/联营单位-->
+      <view class="cooperate">
+        <view class="title">合作单位/联营单位</view>
+        <u-gap height="5" bg-color="#f3f3f3" />
+        <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+        </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" /><el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+      </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" />
+        <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+        </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" />
+      </view>
+		</view>
+    <!-- 现货市场 end -->
+    <gap height="50"/>
+    <common-footer></common-footer>
+	</view>
+</template>
+
+<script>
+	import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
+
+  export default {
+		components: {UGap},
+		data() {
+			return {
+				list: [{
+						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+						title: '身无彩凤双飞翼，心有灵犀一点通'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+					}
+				],
+        options: [{
+          value: 'zhinan',
+          label: '广西',
+          children: [{
+            value: 'shejiyuanze',
+            label: '南宁市',
+            children: [{
+              value: 'yizhi',
+              label: '良庆区'
+            }, {
+              value: 'fankui',
+              label: 'XXX'
+            }, {
+              value: 'xiaolv',
+              label: 'XXX'
+            }, {
+              value: 'kekong',
+              label: 'XXX'
+            }]
+          }, {
+            value: 'daohang',
+            label: '北海市',
+            children: [{
+              value: 'cexiangdaohang',
+              label: 'XXX'
+            }, {
+              value: 'dingbudaohang',
+              label: 'XXX'
+            }]
+          }]
+        }]
+			};
+		},
+		onLoad(options) {
+			console.log(options);
+			if (options && options.menu) {
+				this.currMenu = options.menu
+			}
+		},
+		methods: {
+			menuSelect(e) {
+				this.currMenu = e
+			},
+      navTo(url) {
+        vk.navigateTo(url);
+      }
+		}
+	}
+</script>
+
+<style lang="scss">
+	.w-1200 {
+		width: 1200px;
+		margin: 20px auto;
+    background-color: #fff;
+    .test{
+      height: 50px;
+      color: #ffffff;
+      font-size: 18px;
+      background-color: #bf2b28;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text{
+        margin: 0 20px;
+      }
+    }
+    .tool-bar{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px;
+      font-size: 16px;
+      .search{
+        display: flex;
+        align-items: center;
+      }
+    }
+    .cooperate{
+      .title{
+        text-align: center;
+        color: #bf2b28;
+        font-size: 28px;
+        line-height: 3em;
+      }
+      .wrap{
+        flex-wrap: wrap;
+      }
+      .grid-content{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        flex-direction: column;
+        .comments{
+          line-height: 2em;
+        }
+      }
+      .bg-purple{
+        border-top: 1px solid #f3f3f3;
+        border-right: 1px solid #f3f3f3;
+        .image{
+          width: 140px;
+        }
+      }
+    }
+	}
+</style>
diff --git a/pages/index/server/server.vue b/pages/index/server/server.vue
new file mode 100644
index 0000000..a0b44df
--- /dev/null
+++ b/pages/index/server/server.vue
@@ -0,0 +1,366 @@
+<template>
+  <view>
+    <top-bar></top-bar>
+    <common-header></common-header>
+    <category-bar></category-bar>
+    <view class="w-1200">
+      <u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
+      <view class="test">
+        <text @click="navTo('/pages/index/self-support/self-support')">自营钢城</text>
+        <text @click="navTo('/pages/index/server/server')">平台服务</text>
+        <text @click="navTo('/pages/index/shop/shop')">特产商城</text>
+      </view>
+      <view class="tool-bar">
+        <view class="search">
+          <text>交易区域：</text>
+          <el-cascader :options="options">
+            <template slot-scope="{ node, data }">
+              <span>{{ data.label }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </view>
+        <view class="buy-btn">
+          <u-button type="error" plain>下单询价</u-button>
+        </view>
+      </view>
+      <!-- 合作单位/联营单位-->
+      <view class="cooperate">
+        <view class="title">合作单位/联营单位</view>
+        <u-gap height="5" bg-color="#f3f3f3" />
+        <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+        </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" /><el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+      </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" />
+        <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+        </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" />
+      </view>
+    </view>
+    <!-- 现货市场 end -->
+    <gap height="50"/>
+    <common-footer></common-footer>
+  </view>
+</template>
+
+<script>
+import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
+
+export default {
+  components: {UGap},
+  data() {
+    return {
+      list: [{
+        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+      },
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+          title: '身无彩凤双飞翼，心有灵犀一点通'
+        },
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+        }
+      ],
+      options: [{
+        value: 'zhinan',
+        label: '广西',
+        children: [{
+          value: 'shejiyuanze',
+          label: '南宁市',
+          children: [{
+            value: 'yizhi',
+            label: '良庆区'
+          }, {
+            value: 'fankui',
+            label: 'XXX'
+          }, {
+            value: 'xiaolv',
+            label: 'XXX'
+          }, {
+            value: 'kekong',
+            label: 'XXX'
+          }]
+        }, {
+          value: 'daohang',
+          label: '北海市',
+          children: [{
+            value: 'cexiangdaohang',
+            label: 'XXX'
+          }, {
+            value: 'dingbudaohang',
+            label: 'XXX'
+          }]
+        }]
+      }]
+    };
+  },
+  onLoad(options) {
+    console.log(options);
+    if (options && options.menu) {
+      this.currMenu = options.menu
+    }
+  },
+  methods: {
+    menuSelect(e) {
+      this.currMenu = e
+    },
+    navTo(url) {
+      vk.navigateTo(url);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.w-1200 {
+  width: 1200px;
+  margin: 20px auto;
+  background-color: #fff;
+  .test{
+    height: 50px;
+    color: #ffffff;
+    font-size: 18px;
+    background-color: #bf2b28;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text{
+      margin: 0 20px;
+    }
+  }
+  .tool-bar{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    font-size: 16px;
+    .search{
+      display: flex;
+      align-items: center;
+    }
+  }
+  .cooperate{
+    .title{
+      text-align: center;
+      color: #bf2b28;
+      font-size: 28px;
+      line-height: 3em;
+    }
+    .wrap{
+      flex-wrap: wrap;
+    }
+    .grid-content{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      flex-direction: column;
+      .comments{
+        line-height: 2em;
+      }
+    }
+    .bg-purple{
+      border-top: 1px solid #f3f3f3;
+      border-right: 1px solid #f3f3f3;
+      .image{
+        width: 140px;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/index/shop/shop.vue b/pages/index/shop/shop.vue
new file mode 100644
index 0000000..a0b44df
--- /dev/null
+++ b/pages/index/shop/shop.vue
@@ -0,0 +1,366 @@
+<template>
+  <view>
+    <top-bar></top-bar>
+    <common-header></common-header>
+    <category-bar></category-bar>
+    <view class="w-1200">
+      <u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
+      <view class="test">
+        <text @click="navTo('/pages/index/self-support/self-support')">自营钢城</text>
+        <text @click="navTo('/pages/index/server/server')">平台服务</text>
+        <text @click="navTo('/pages/index/shop/shop')">特产商城</text>
+      </view>
+      <view class="tool-bar">
+        <view class="search">
+          <text>交易区域：</text>
+          <el-cascader :options="options">
+            <template slot-scope="{ node, data }">
+              <span>{{ data.label }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </view>
+        <view class="buy-btn">
+          <u-button type="error" plain>下单询价</u-button>
+        </view>
+      </view>
+      <!-- 合作单位/联营单位-->
+      <view class="cooperate">
+        <view class="title">合作单位/联营单位</view>
+        <u-gap height="5" bg-color="#f3f3f3" />
+        <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+        </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" /><el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="grid-content bg-purple">
+            <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+            <view class="comments">
+              主营：架子管 扣件 建筑材料租赁
+            </view>
+          </div>
+        </el-col>
+      </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" />
+        <el-row class="wrap" type="flex" :gutter="0" justify="space-between">
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <el-image class="image" src="http://localhost:8080/static/img/logo.d1f4a2b6.png" />
+              <view class="comments">
+                主营：架子管 扣件 建筑材料租赁
+              </view>
+            </div>
+          </el-col>
+        </el-row>
+        <u-gap height="5" bg-color="#f3f3f3" />
+      </view>
+    </view>
+    <!-- 现货市场 end -->
+    <gap height="50"/>
+    <common-footer></common-footer>
+  </view>
+</template>
+
+<script>
+import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
+
+export default {
+  components: {UGap},
+  data() {
+    return {
+      list: [{
+        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+      },
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+          title: '身无彩凤双飞翼，心有灵犀一点通'
+        },
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+        }
+      ],
+      options: [{
+        value: 'zhinan',
+        label: '广西',
+        children: [{
+          value: 'shejiyuanze',
+          label: '南宁市',
+          children: [{
+            value: 'yizhi',
+            label: '良庆区'
+          }, {
+            value: 'fankui',
+            label: 'XXX'
+          }, {
+            value: 'xiaolv',
+            label: 'XXX'
+          }, {
+            value: 'kekong',
+            label: 'XXX'
+          }]
+        }, {
+          value: 'daohang',
+          label: '北海市',
+          children: [{
+            value: 'cexiangdaohang',
+            label: 'XXX'
+          }, {
+            value: 'dingbudaohang',
+            label: 'XXX'
+          }]
+        }]
+      }]
+    };
+  },
+  onLoad(options) {
+    console.log(options);
+    if (options && options.menu) {
+      this.currMenu = options.menu
+    }
+  },
+  methods: {
+    menuSelect(e) {
+      this.currMenu = e
+    },
+    navTo(url) {
+      vk.navigateTo(url);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.w-1200 {
+  width: 1200px;
+  margin: 20px auto;
+  background-color: #fff;
+  .test{
+    height: 50px;
+    color: #ffffff;
+    font-size: 18px;
+    background-color: #bf2b28;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text{
+      margin: 0 20px;
+    }
+  }
+  .tool-bar{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    font-size: 16px;
+    .search{
+      display: flex;
+      align-items: center;
+    }
+  }
+  .cooperate{
+    .title{
+      text-align: center;
+      color: #bf2b28;
+      font-size: 28px;
+      line-height: 3em;
+    }
+    .wrap{
+      flex-wrap: wrap;
+    }
+    .grid-content{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      flex-direction: column;
+      .comments{
+        line-height: 2em;
+      }
+    }
+    .bg-purple{
+      border-top: 1px solid #f3f3f3;
+      border-right: 1px solid #f3f3f3;
+      .image{
+        width: 140px;
+      }
+    }
+  }
+}
+</style>