Merge branch 'devlop' of http://git.qniao.cn/qniao/paper-shopkeeper-H5 into devlop

4 years ago · c3ade483db
24 changed files with 2320 additions and 65 deletions
--- a/App.vue
+++ b/App.vue
@ -14,7 +14,7 @@ export default {
      }
    } else {
      if (!store.state.supplierId) {
-        go2('error')
+        // go2('error')
      }
    }
  },
--- a/components/qn-input-number/qn-input-number.vue
+++ b/components/qn-input-number/qn-input-number.vue
@ -0,0 +1,73 @@
+<template>
+	<view class="warpper">
+		<view class="minus-box" @tap="minusTap">
+			－
+		</view>
+		<view class="" style="padding: 0rpx 4rpx;">
+			<uni-easyinput 
+			:inputBorder="false" 
+			class="quantity-input" 
+			type="number" 
+			:value="value" 
+			placeholder="请输入"
+			 @blur="blur"
+			@confirm="confirm"
+			></uni-easyinput>
+		</view>
+		<view class="minus-box" @tap="addTap">
+			<uni-icons size="16" type="plusempty" color="#007AFF"></uni-icons>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: 0,
+			}
+		},
+		methods: {
+			blur(e) {
+				 this.$emit('change', e.detail.value)
+			},
+			confirm(value) {
+				if (value.trim()) {
+				  this.$emit('change', value)
+				}
+			},
+			minusTap() {
+				if(this.value == 0){
+					return
+				}
+				this.value--
+			},
+			addTap() {
+				this.value++
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.warpper{
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		.minus-box {
+			width: 64rpx;
+			height: 64rpx;
+			line-height: 64rpx;
+			text-align: center;
+			background: #F2F3F5;
+			border-radius: 8rpx;
+			color: #007AFF;
+		}
+		.quantity-input {
+			width: 120rpx;
+			height: 64rpx;
+			background: #F2F3F5;
+			
+		}
+	}
+</style>
--- a/components/u-gap/u-gap.vue
+++ b/components/u-gap/u-gap.vue
@ -0,0 +1,24 @@
+<template>
+	<view class="gap"></view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+.gap {
+		height: 20rpx;
+		width: 100%;
+		background: #f4f4f5;
+	}
+</style>
--- a/pages.json
+++ b/pages.json
@ -82,7 +82,28 @@
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
      }
-    }
+    },
+	{
+	  "path": "pages/paper-details/index",
+	  "style": {
+	    "navigationBarTitleText": "纸品详情",
+	    "enablePullDownRefresh": false
+	  }
+	},
+	{
+	  "path": "pages/for-comparison/index",
+	  "style": {
+	    "navigationBarTitleText": "实单询比价",
+	    "enablePullDownRefresh": false
+	  }
+	},
+	{
+	  "path": "pages/add-address-manage/index",
+	  "style": {
+	    "navigationBarTitleText": "新建收货地址",
+	    "enablePullDownRefresh": false
+	  }
+	}
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
--- a/pages/add-address-manage/index.vue
+++ b/pages/add-address-manage/index.vue
@ -0,0 +1,208 @@
+<template>
+	<view class="warpper">
+		<view class="qn-form-item">
+			<view class="label"><text class="label__text">收货人</text></view>
+			<view class="value">
+				<qn-easyinput :maxlength="20" @blur="showCompany" v-model="form.name" :inputBorder="false" text="left" placeholder="请填写收货人姓名"></qn-easyinput>
+			</view>
+		</view>
+		<view class="qn-form-item">
+			<view class="label"><text class="label__text">手机号</text></view>
+			<view class="value">
+				<qn-easyinput :maxlength="11" type="number" v-model="form.contactMobile" :inputBorder="false" text="left" placeholder="请填写收货人手机号"></qn-easyinput>
+			</view>
+		</view>
+		<view class="qn-form-item">
+		 <view class="label"><text class="label__text">所在地区</text></view>
+			<view class="value">
+				<!-- <qn-easyinput v-model="form.shortName" :inputBorder="false" text="right" placeholder="选择所在区域"></qn-easyinput> -->
+				<qn-data-picker
+					:readonly="hasSelected"
+					text="left"
+					:border="false"
+					class="qn-picker"
+					placeholder="点击选择"
+					popup-title="请选择城市"
+					:map="{ text: 'name', value: 'id' }"
+					@change="onAreaChange"
+					:clear-icon="true"
+					:localdata="items"
+				>
+					<text v-if="form.locDistrictId">{{ `${form.locProvinceName || ''}/${form.locCityName || ''}/${form.locDistrictName || ''}/${form.locStreetName || ''}` }}</text>
+				</qn-data-picker>
+			</view>
+		</view>
+		<view class="qn-form-item">
+			<view class="label"><text class="label__text">详细地址</text></view>
+			<view class="value">
+				<qn-easyinput :maxlength="120" @blur="showCompany" v-model="form.name" :inputBorder="false" text="left" placeholder="街道/门牌号/小区/乡镇/村等"></qn-easyinput>
+			</view>
+		</view>
+		<uGap></uGap>
+		<view class="default-address">
+			<view class="">
+				<view class="title">设置为默认地址</view>
+				<view class="tip">提醒：每次下单会默认使用该地址</view>
+			</view>
+			<view class="">
+				  <switch checked style="transform:scale(0.8)"/>
+			</view>
+		</view>
+		<qn-footer fixed height="120rpx">
+			<view class="button-area">
+				<!-- <view class="button button__cancel" @click="back">
+		  <text class="text">取消</text>
+		</view> -->
+				<view class="button button__submit" @click="addTap"><text class="text" style="color: white">保存</text></view>
+			</view>
+		</qn-footer>
+	</view>
+</template>
+
+<script>
+import uGap from '@/components/u-gap/u-gap.vue'
+import { getArea } from '@/apis/commonApi.js'
+import qnFooter from '@/components/qn-footer/qn-footer.vue'
+import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
+export default {
+	components: { uGap, qnFooter, qnDataPicker },
+	data() {
+		return {
+			form: {
+				name: null,
+				contactMobile: null,
+				locProvinceId: null,
+				locCityId: null,
+				locDistrictId: null,
+				locProvinceName: null,
+				locCityName: null,
+				locDistrictName: null
+			},
+			hasSelected: false,
+			items: []
+		}
+	},
+	mounted() {
+		getArea().then(res => {
+			if (res) {
+				this.items = res
+			}
+		})
+	},
+	onLoad() {},
+	methods: {
+		onAreaChange(e) {
+			if (e.detail.value && e.detail.value.length > 0) {
+				const [province, city, district, street] = e.detail.value
+				this.form.locProvinceId = province.value
+				this.form.locProvinceName = province.text
+				this.form.locCityId = city.value
+				this.form.locCityName = city.text
+				this.form.locDistrictId = district.value
+				this.form.locDistrictName = district.text
+				this.form.locStreetId = street.value
+				this.form.locStreetName = street.text
+			} else {
+				this.form.locProvinceId = null
+			 this.form.locProvinceName = null
+				this.form.locCityId = null
+				this.form.locCityName = null
+				this.form.locDistrictId = null
+				this.form.locDistrictName = null
+				this.form.locStreetId = null
+				this.form.locStreetName = null
+			}
+		},
+		showCompany() {},
+		// 保存
+		addTap() {}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.warpper {
+	.qn-form-item {
+		width: 750rpx;
+		padding: 0rpx 32rpx;
+		background-color: #fff;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		// justify-content: space-between;
+		border-bottom: 2rpx solid #d8d8d8;
+		min-height: 88rpx;
+		.label {
+		 flex-grow: 0;
+			flex-shrink: 0;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: flex-start;
+			margin-right: 20rpx;
+			.label__text {
+				font-size: 28rpx;
+				color: #000000;
+			}
+		}
+		.value {
+			flex-grow: 1;
+			flex-shrink: 1;
+			text-align: right;
+		}
+	}
+	.default-address {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0rpx 32rpx;
+		height: 133rpx;
+		background: #ffffff;
+		.title {
+			font-size: 30rpx;
+			color: #333333;
+			letter-spacing: 0;
+			font-weight: 400;
+		}
+		.tip {
+			padding-top: 10rpx;
+			font-size: 24rpx;
+			color: #888888;
+			letter-spacing: 0;
+			font-weight: 400;
+		}
+	}
+	.button-area {
+		width: 750rpx;
+		padding: 0 32rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		// justify-content: space-between;
+		.button {
+			flex-grow: 0;
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 10rpx;
+			.text {
+				font-size: 30rpx;
+				font-weight: 500;
+				text-align: center;
+			}
+		}
+		.button__cancel {
+			width: 270rpx;
+			height: 88rpx;
+			border: 2rpx solid #979797;
+		}
+		.button__submit {
+			width: 100%;
+			height: 88rpx;
+			background: #007aff;
+		}
+	}
+}
+</style>
--- a/pages/address-manage/index.vue
+++ b/pages/address-manage/index.vue
@ -1,12 +1,58 @@
 <template>
-  <view>
-    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="收货地址"></uni-nav-bar>
-  </view>
+	<view class="warpper">
+		<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="收货地址"></uni-nav-bar>
+		<view class="content" v-for="(item, index) in 3" :key="index">
+			<view class="info-box">
+				<view class="name">徐晓朋 18826104989</view>
+				<view class="address">广东省广州市天河区车陂大岗路联合社区西区8栋8408广氮新村55栋701</view>
+			</view>
+			<view class="other">
+				<view class="left">
+					<label>
+						<radio value="r1" :checked="false" style="transform:scale(0.8)" />
+						设置为默认
+					</label>
+				</view>
+				<view class="right">
+					<view class="" @tap="delTap(item, index)">删除</view>
+					<view class="edit">编辑</view>
+				</view>
+			</view>
+		</view>
+		<qn-footer fixed height="120rpx">
+			<view class="button-area">
+				<!-- <view class="button button__cancel" @click="back">
+	      <text class="text">取消</text>
+	    </view> -->
+				<view class="button button__submit" @click="addTap"><text class="text" style="color: white">添加地址</text></view>
+			</view>
+		</qn-footer>
+		<uni-popup ref="popup" type="center" :mask-click="false">
+			<view class="popup-box">
+				<view class="tip-title">
+					确定要删除改地址吗？
+				</view>
+				<view class="operation-row">
+					<view class="cancel-text" @tap="cancelTap">
+						取消
+					</view>
+					<view class="line">
+						
+					</view>
+					<view class="confirm-text" @tap="confirmTap">
+						确定
+					</view>
+				</view>
+			</view>
+			</uni-popup>
+	</view>
 </template>

 <script>
 import { go2, back, setCache } from '@/utils/hook.js'
+import qnFooter from '@/components/qn-footer/qn-footer.vue'
 export default {
+	components:{ qnFooter },
  data() {
    return {
      /**
@ -24,7 +70,22 @@ export default {
        setCache('address', item)
        back()
      }
-    }
+    },
+	// 新增收货地址
+	addTap() {
+		go2('add-address-manage')
+	},
+	// 删除
+	delTap(item, index) {
+		this.$refs.popup.open('center')
+		// this.$refs.popup.close()
+	},
+	confirmTap() {
+		this.$refs.popup.close()
+	},
+	cancelTap() {
+		this.$refs.popup.close()
+	}
  },
  onLoad(option) {
    if (option) {
@ -34,4 +95,139 @@ export default {
 }
 </script>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.warpper {
+	.content {
+		padding-bottom: 16rpx;
+		.info-box {
+			max-height: 197rpx;
+			background: #ffffff;
+			padding: 27rpx 32rpx;
+			border-bottom: 2rpx solid #d8d8d8;
+			.name {
+				ont-size: 30rpx;
+				color: #333333;
+				letter-spacing: 0;
+				font-weight: 400;
+			}
+			.address {
+				padding-top: 16rpx;
+				font-size: 28rpx;
+				color: #333333;
+				letter-spacing: 0;
+				font-weight: 400;
+			}
+		}
+		.other {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0rpx 32rpx;
+			height: 80rpx;
+			background: #ffffff;
+			.left {
+				font-size: 28rpx;
+				color: #007aff;
+				letter-spacing: 0;
+				font-weight: 400;
+			}
+			.right {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				font-size: 28rpx;
+				color: #888888;
+				letter-spacing: 0;
+				font-weight: 400;
+				.edit {
+					padding-left: 32rpx;
+				}
+			}
+		}
+	}
+	.button-area {
+		width: 750rpx;
+		padding: 0 32rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		// justify-content: space-between;
+		.button {
+			flex-grow: 0;
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 10rpx;
+			.text {
+				font-size: 30rpx;
+				font-weight: 500;
+				text-align: center;
+			}
+		}
+		.button__cancel {
+			width: 270rpx;
+			height: 88rpx;
+			border: 2rpx solid #979797;
+		}
+		.button__submit {
+			width: 100%;
+			height: 88rpx;
+			background: #007aff;
+		}
+	}
+	.popup-box {
+		width: 540rpx;
+		height: 226rpx;
+		background: #FFFFFF;
+		border-radius: 14rpx;
+		.tip-title {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			height: 126rpx;
+			font-size: 32rpx;
+			color: #333333;
+			letter-spacing: 0;
+			text-align: center;
+			font-weight: 400;
+		}
+		.operation-row {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+			align-items: center;
+			height: 100rpx;
+			background: #FFFFFF;
+			border-top: 2rpx solid #DDDDDD;
+			.cancel-text {
+				flex-grow: 1;
+				flex-shrink: 1;
+				font-size: 36rpx;
+				color: #000000;
+				letter-spacing: 0;
+				text-align: center;
+				font-weight: 400;
+			}
+			.line {
+				flex-grow: 0;
+				flex-shrink: 0;
+				width: 2rpx;
+				height: 100rpx;
+				border-left: 2rpx solid #DCDEE3;
+			}
+			.confirm-text{
+				flex-grow: 1;
+				flex-shrink: 1;
+				font-size: 36rpx;
+				color: #108EE9;
+				letter-spacing: 0;
+				text-align: center;
+				font-weight: 400;
+			}
+		}
+	}
+}
+</style>
--- a/pages/cart/index.vue
+++ b/pages/cart/index.vue
@ -1,40 +1,273 @@
 <template>
-	<view class="content">
-		mine
+	<view class="warpper">
+		<uni-nav-bar>
+			<view slot="left" class="left-title">购物车</view>
+			<view slot="right" class="right-title">删除</view>
+		</uni-nav-bar>
+		<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
+			<view class="group-box" v-for="(item, index) in 6" :key="index">
+				<uGap></uGap>
+				<view class="group-checkbox">
+					<view class="checkbox">
+						<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" /></checkbox-group>
+					</view>
+					<view class="">广州市荔湾区强丰纸业</view>
+				</view>
+				<view class="list-box" v-for="(subItem, subIndex) in 2" :key="subIndex">
+					<view class="checkbox">
+						<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)" /></checkbox-group>
+					</view>
+					<view class="list-row">
+						<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+						<view class="right">
+							<view class="name">晨鸣丽品白卡</view>
+							<view class="measure">245g｜787*1092</view>
+							<view class="weight">预估重量：1.6346吨</view>
+							<view class="price-row">
+								<view class="value">¥3600.00</view>
+								<view class=""><qnInputNumber @change="change" /></view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+		</scroll-list>
+		<!-- <qn-footer fixed height="100rpx" >
+			<view class="row">
+				<view class="left">
+					<view class="">
+						<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)"></checkbox></checkbox-group>
+					</view>
+					<view class=""><text class="check-text">全选</text></view>
+				</view>
+				<view class="right">
+					<view class="">
+						<text class="name">应付：</text>
+						<text class="value">¥7200.00</text>
+					</view>
+					<view class="right-balance-btn">结算</view>
+				</view>
+			</view>
+		</qn-footer> -->
+		<view class="footer-box">
+			<view class="row">
+				<view class="left">
+					<view class="">
+						<checkbox-group @change="onCheck"><checkbox value="cb" :checked="checked" color="#000000" style="transform: scale(0.7)"></checkbox></checkbox-group>
+					</view>
+					<view class=""><text class="check-text">全选</text></view>
+				</view>
+				<view class="right">
+					<view class="">
+						<text class="name">应付：</text>
+						<text class="value">¥7200.00</text>
+					</view>
+					<view class="right-balance-btn">结算</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>

 <script>
+import uGap from '@/components/u-gap/u-gap.vue'
+import qnFooter from '@/components/qn-footer/qn-footer.vue'
+import { back, go2 } from '@/utils/hook.js'
+import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue'
+export default {
+	components: { uGap, qnInputNumber, qnFooter },
+	data() {
+		return {
+			option: {
+				size: 10,
+				auto: true,
+				// height: '90%',
+				emptyText: '暂无数据~',
+				background: '#F7F8FA',
+				disabled: false
+			},
+			params: {},
+			pagination: {
+				pageNum: 0, // 初始会执行一次下拉加载
+				pageSize: 10
+			},
+			checked: false,
+		}
+	},
+	created() {
+		let that = this
+		uni.getSystemInfo({
+		    success: function (res) {
+		        console.log( '状态栏的高', res.statusBarHeight);
+				that.option.height = (res.windowHeight) * (750/res.windowWidth) - 180
+				
+		    }
+		});
+	},
+	onLoad() {

-	export default {
-		
+	},
+	methods: {
+		downCallback() {},
+		upCallback() {},
+		/**
+		 * @param {Number} num
+		 * 计数器返回值
+		 */
+		change(num) {}
 	}
+}
 </script>

-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+<style lang="scss">
+.warpper {
+	.left-title {
+		font-size: 40rpx;
+		color: #000000;
+		letter-spacing: 0;
+		font-weight: 500;
 	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+	.right-title {
+		font-size: 28rpx;
+		color: #f5222d;
+		text-align: right;
+		font-weight: 500;
 	}
-
-	.text-area {
+	.group-box {
+		// padding: 0rpx 32rpx;
+		.group-checkbox {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			height: 88rpx;
+			background: #ffffff;
+			padding: 0rpx 32rpx;
+		}
+	}
+	.checkbox {
+		flex: 0 0 35rpx;
+		margin-right: 20rpx;
+	}
+	.list-box {
+		width: 100%;
 		display: flex;
-		justify-content: center;
+		flex-direction: row;
+		align-items: center;
+		border-top: 2rpx solid #d8d8d8;
+		padding: 28rpx 32rpx 40rpx 32rpx;
+		.list-row {
+			flex: 1;
+			display: flex;
+			flex-direction: row;
+			.image {
+				flex: 0 0 180rpx;
+				width: 180rpx;
+				height: 180rpx;
+				border-radius: 8px;
+				margin-right: 16rpx;
+			}
+			.right {
+				flex: 1;
+				width: 100%;
+			}
+			.name {
+				font-size: 34rpx;
+				color: #333333;
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 600;
+				padding-top: 10rpx;
+			}
+			.measure {
+				font-size: 24rpx;
+				color: #333333;
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 500;
+				margin-top: 16rpx;
+			}
+			.weight {
+				text-align: center;
+				font-size: 24rpx;
+				color: #888888;
+				font-weight: 400;
+				text-align: right;
+				padding-top: 4rpx;
+			}
+			.price-row {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				padding-top: 12rpx;
+				.value {
+					font-size: 30rpx;
+					color: #f5222d;
+					letter-spacing: 0;
+					text-align: left;
+					font-weight: 500;
+				}
+			}
+		}
 	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	.footer-box {
+		left: 0;
+		right: 0;
+		.check-text {
+			font-size: 24rpx;
+			color: #333333;
+			letter-spacing: 0;
+			text-align: center;
+			font-weight: 400;
+		}
+		.row {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			height: 96rpx;
+			background: #ffffff;
+			padding: 0rpx 32rpx;
+			.left {
+				flex: 0 0 200rpx;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+			}
+			.right {
+				flex: 1;
+				// width: 100%;
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				.name {
+					font-size: 28rpx;
+					color: rgba(0, 0, 0, 0.85);
+					text-align: right;
+					font-weight: 400;
+				}
+				.value {
+					font-size: 36rpx;
+					color: #f5222d;
+					letter-spacing: 0;
+					text-align: left;
+					font-weight: 500;
+				}
+			}
+			.right-balance-btn {
+				width: 201rpx;
+				height: 76rpx;
+				line-height: 76rpx;
+				background: #007aff;
+				border-radius: 38rpx;
+				font-size: 32rpx;
+				color: #ffffff;
+				letter-spacing: 0;
+				text-align: center;
+				font-weight: 400;
+			}
+		}
 	}
+}
 </style>
--- a/pages/for-comparison/index.vue
+++ b/pages/for-comparison/index.vue
@ -0,0 +1,592 @@
+<template>
+	<view class="content">
+		<view>
+			<view class="hint-box">全网优质原纸供应商，20分钟极速响应。</view>
+			<view class="qn-form-item qn-form-item">
+				<view class="label">
+					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
+					<text class="label__text">纸种</text>
+				</view>
+				<view class="value">
+					<picker :value="paperIndex" :range="paperGradesList">
+						<view>
+							<text class="uni-input">{{ paperGradesList[paperIndex] }}</text>
+							<uni-icons type="right" color="#000000" size="16"></uni-icons>
+						</view>
+					</picker>
+				</view>
+			</view>
+			<view class="qn-form-item qn-form-item">
+				<view class="label">
+					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
+					<text class="label__text">品牌</text>
+				</view>
+				<view class="value">
+					<picker :value="paperIndex" :range="brandList">
+						<view>
+							<text class="uni-input">{{ brandList[paperIndex] }}</text>
+							<uni-icons type="right" color="#000000" size="16"></uni-icons>
+						</view>
+					</picker>
+				</view>
+			</view>
+			<view class="qn-form-item qn-form-item">
+				<view class="label">
+					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
+					<text class="label__text">纸品名称</text>
+				</view>
+				<view class="value"><qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入纸品名称"></qn-easyinput></view>
+			</view>
+			<view class="qn-form-item qn-form-item">
+				<view class="label">
+					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
+					<text class="label__text">克重(g)</text>
+				</view>
+				<view class="value">
+					<picker :value="paperIndex" :range="gramWeightList">
+						<view>
+							<text class="uni-input">{{ gramWeightList[paperIndex] }}</text>
+							<uni-icons type="right" color="#000000" size="16"></uni-icons>
+						</view>
+					</picker>
+				</view>
+			</view>
+			<view class="qn-form-item-gg ">
+				<view class="label">
+					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
+					<text class="label__text">规格(mm)</text>
+				</view>
+				<view class="value">
+					<view class="value">
+						<!-- <qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入数量"></qn-easyinput> -->
+						<radio-group>
+							<label v-for="(item, index) in radioGroupList" :key="index">
+								<radio :value="item" :checked="index === 0" style="transform:scale(0.7)" />
+								<text class="uni-input">{{ item }}</text>
+							</label>
+						</radio-group>
+					</view>
+					<view class="input-row">
+						<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="form.shortName" placeholder="请输入"></uni-easyinput></view>
+						<view class="symbol">x</view>
+						<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="form.shortName" placeholder="请输入"></uni-easyinput></view>
+					</view>
+				</view>
+			</view>
+			<view class="qn-form-item qn-form-item">
+				<view class="label">
+					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
+					<text class="label__text">数量(张)</text>
+				</view>
+				<view class="value">
+					<view class="value"><qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入数量"></qn-easyinput></view>
+				</view>
+			</view>
+			<view class="qn-form-item qn-form-item">
+				<view class="label"><text class="label__text">交货时间</text></view>
+				<view class="value">
+					<picker :value="paperIndex" :range="deliveryTimeList">
+						<view>
+							<text class="uni-input">{{ deliveryTimeList[paperIndex] }}</text>
+							<uni-icons type="right" color="#000000" size="16"></uni-icons>
+						</view>
+					</picker>
+				</view>
+			</view>
+			<view class="qn-form-item qn-form-item" style="border: none;">
+				<view class="label">
+					<!-- <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> -->
+					<text class="label__text">交货区域</text>
+				</view>
+				<view class="value">
+					<!-- <qn-easyinput v-model="form.shortName" :inputBorder="false" text="right" placeholder="选择所在区域"></qn-easyinput> -->
+					<qn-data-picker
+						:readonly="hasSelected"
+						text="right"
+						:border="false"
+						class="qn-picker"
+						placeholder="区域"
+						popup-title="请选择城市"
+						:map="{ text: 'name', value: 'id' }"
+						@change="onAreaChange"
+						:clear-icon="true"
+						:localdata="items"
+					>
+						<text v-if="form.locDistrictId">
+							{{ `${form.locProvinceName || ''}/${form.locCityName || ''}/${form.locDistrictName || ''}/${form.locStreetName || ''}` }}
+						</text>
+					</qn-data-picker>
+				</view>
+			</view>
+			<uGap></uGap>
+			<view class="qn-form-item-remark">
+				<view class="label"><text class="label__text">询价备注</text></view>
+				<view class="value">
+					<qn-easyinput
+						class="paper-price-textArea"
+						:maxlength="200"
+						:styles="{ disableColor: '#F7F8FA' }"
+						v-model="form.shortName"
+						:inputBorder="false"
+						type="textarea"
+						placeholder="请输入拜访对象"
+					></qn-easyinput>
+				</view>
+			</view>
+		</view>
+
+		<qn-footer fixed height="120rpx">
+			<view class="button-area">
+				<!-- <view class="button button__cancel" @click="back"><text class="text">取消</text></view> -->
+				<view class="button button__submit" @click="addUser"><text class="text" style="color: white">提交询价</text></view>
+			</view>
+		</qn-footer>
+	</view>
+</template>
+
+<script>
+import { back, uploadImage } from '@/utils/hook.js'
+import { getArea } from '@/apis/commonApi.js'
+import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue'
+import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
+import qnDatetimePicker from '@/components/qn-datetime-picker/qn-datetime-picker.vue'
+import qnFooter from '@/components/qn-footer/qn-footer.vue'
+import uGap from '@/components/u-gap/u-gap.vue'
+const validateFields = [
+	'name',
+	'uniformSocialCreditCode',
+	'legalPersonName',
+	'locProvinceId',
+	'locCityId',
+	'locDistrictId',
+	'locStreetId',
+	'locProvinceName',
+	'locCityName',
+	'locDistrictName',
+	'locStreetName',
+	'locDetail',
+	'legalPersonIdCardNo',
+	'legalPersonIdCardFrontImg',
+	'legalPersonIdCardBackImg',
+	'businessLicenseImg',
+	'registeredCapital',
+	'foundDate'
+]
+export default {
+	components: { qnEasyinput, qnDataPicker, qnDatetimePicker, qnFooter, uGap },
+	data() {
+		return {
+			paperIndex: 0,
+			paperGradesList: ['白卡板', '黑板纸', '灰板纸'],
+			brandList: ['朱雀', '金蝶兰', '骄阳', '太阳', '丽品'],
+			gramWeightList: ['300', '345', '350'],
+			deliveryTimeList: ['当天到', '明天到'],
+			radioGroupList: ['正度', '大度', '特规'],
+			form: {
+				id: null,
+				name: null,
+				shortName: null,
+				contactName: null,
+				contactMobile: null,
+				contactTitle: null,
+				uniformSocialCreditCode: null,
+				locProvinceId: null,
+				locCityId: null,
+				locDistrictId: null,
+				locStreetId: null,
+				locProvinceName: null,
+				locCityName: null,
+				locDistrictName: null,
+				locStreetName: null,
+				locDetail: null,
+				legalPersonName: null,
+				legalPersonMobile: null,
+				legalPersonIdCardNo: null,
+				legalPersonIdCardFrontImg: null,
+				legalPersonIdCardBackImg: null,
+				businessLicenseImg: null,
+				registeredCapital: null,
+				foundDate: null
+			},
+			searchList: [],
+			hasSelected: false,
+			items: []
+		}
+	},
+	mounted() {
+		getArea().then(res => {
+			if (res) {
+				this.items = res
+			}
+		})
+	},
+	methods: {
+		back,
+		showCompany(e) {
+			let enterpriseName = e.detail.value.trim()
+			if (enterpriseName) {
+				getCompanyList({ enterpriseName }).then(res => {
+					if (res) {
+						this.searchList = res.records
+						if (this.searchList.length > 0) {
+							this.$refs.popup.open('bottom')
+						}
+					}
+				})
+			}
+		},
+		selectCompany(enterpriseId) {
+			this.$refs.popup.close()
+			getCompanyInfoById({ enterpriseId }).then(res => {
+				if (res) {
+					this.form.id = enterpriseId
+					this.form.name = res.name
+					// 信息反显
+					this.reflectiveCompany(res)
+					setTimeout(() => {
+						this.hasSelected = true
+					}, 0)
+				}
+			})
+		},
+		reflectiveCompany(info) {
+			this.form.uniformSocialCreditCode = info.uniformSocialCreditCode
+			this.form.locProvinceId = info.locProvinceId
+			this.form.locCityId = info.locCityId
+			this.form.locStreetId = info.locStreetId
+			this.form.locDistrictId = info.locDistrictId
+			this.form.locProvinceName = info.locProvinceName
+			this.form.locCityName = info.locCityName
+			this.form.locStreetName = info.locStreetName
+			this.form.locDistrictName = info.locDistrictName
+			this.form.locDetail = info.locDetail
+			this.form.registeredCapital = info.registeredCapital
+			this.form.foundDate = info.foundDate
+		},
+		onAreaChange(e) {
+			if (e.detail.value && e.detail.value.length > 0) {
+				const [province, city, district, street] = e.detail.value
+				this.form.locProvinceId = province.value
+				this.form.locProvinceName = province.text
+				this.form.locCityId = city.value
+				this.form.locCityName = city.text
+				this.form.locDistrictId = district.value
+				this.form.locDistrictName = district.text
+				this.form.locStreetId = street.value
+				this.form.locStreetName = street.text
+			} else {
+				this.form.locProvinceId = null
+				this.form.locProvinceName = null
+				this.form.locCityId = null
+				this.form.locCityName = null
+				this.form.locDistrictId = null
+				this.form.locDistrictName = null
+				this.form.locStreetId = null
+				this.form.locStreetName = null
+			}
+		},
+		selectedImage(type) {
+			uploadImage()
+				.then(urls => {
+					if (urls) {
+						this.form[type] = urls[0]
+					}
+				})
+				.catch(e => {
+					uni.showToast({
+						title: '上传失败',
+						icon: 'fail'
+					})
+				})
+		},
+		showImage() {
+			uni.previewImage({
+				urls: [this.form.businessLicenseImg]
+			})
+		},
+		addUser() {
+			if (!this.form.id) {
+				for (let i = 0; i < validateFields.length; i++) {
+					if (this.form[validateFields[i]] === null || this.form[validateFields[i]] === '') {
+						uni.showToast({
+							title: '请完善信息',
+							icon: 'none'
+						})
+						return
+					}
+				}
+				if (!/^1[3456789]\d{9}$/.test(this.form['legalPersonMobile'])) {
+					uni.showToast({
+						title: '请输入正确法人手机号',
+						icon: 'none'
+					})
+					return
+				}
+				// if (!/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/.test(this.form['legalPersonIdCardNo'])) {
+				//   uni.showToast({
+				//     title: '请输入正确法人身份证号',
+				//     icon: 'none'
+				//   })
+				//   return
+				// }
+			}
+			if (this.form.contactMobile && !/^1[3456789]\d{9}$/.test(this.form['contactMobile'])) {
+				uni.showToast({
+					title: '请输入正确联系人手机号',
+					icon: 'none'
+				})
+				return
+			}
+			addCustomer(this.form).then(res => {
+				if (res) {
+					uni.showToast({
+						title: '添加成功',
+						icon: 'success'
+					})
+					setTimeout(() => {
+						back()
+					}, 1000)
+				}
+			})
+		}
+	},
+	watch: {
+		['form.name'](val) {
+			if (this.hasSelected) {
+				console.log('watch:', val)
+				this.hasSelected = false
+				this.form.id = null
+				this.reflectiveCompany({})
+			}
+		}
+	},
+	computed: {
+		frontIDCard() {
+			let url = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/frontIDCard.png'
+			if (this.hasSelected || !this.form.legalPersonIdCardFrontImg) {
+				return url
+			}
+			return this.form.legalPersonIdCardFrontImg
+		},
+		backIDCard() {
+			let url = 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/backDCard.png'
+			if (this.hasSelected || !this.form.legalPersonIdCardBackImg) {
+				return url
+			}
+			return this.form.legalPersonIdCardBackImg
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.content {
+	width: 750rpx;
+	display: flex;
+	flex-direction: column;
+	background-color: #f7f8fa;
+}
+.hint-box {
+	padding: 0rpx 32rpx;
+	height: 76rpx;
+	line-height: 76rpx;
+	background: #e5f1ff;
+	font-size: 30rpx;
+	color: #007aff;
+	letter-spacing: 0;
+	font-weight: 400;
+}
+.uni-input {
+	font-size: 28rpx;
+	color: #333333;
+	letter-spacing: 0;
+	text-align: right;
+	font-weight: 400;
+	padding-right: 16rpx;
+}
+.qn-form-item-remark {
+	width: 750rpx;
+	padding: 28rpx 32rpx 10rpx 32rpx;
+	background-color: #fff;
+	.label {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		margin-right: 20rpx;
+
+		.label__text {
+			font-size: 28rpx;
+			color: #000000;
+		}
+	}
+	.value {
+		padding: 16rpx 0rpx;
+	}
+	.paper-price-textArea {
+		background: #f7f8fa;
+		border-radius: 20rpx;
+		padding: 10rpx;
+		height: 155rpx;
+	}
+}
+.qn-form-item-gg {
+	width: 750rpx;
+	padding: 24rpx 32rpx;
+	background-color: #fff;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	border-bottom: 2rpx solid #d8d8d8;
+	.label {
+		flex-grow: 0;
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		margin-right: 20rpx;
+		.label__text {
+			font-size: 28rpx;
+			color: #000000;
+		}
+	}
+	.value {
+		flex-grow: 1;
+		flex-shrink: 1;
+		text-align: right;
+	}
+	.input-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+		padding-top: 20rpx;
+		.easyinput {
+			height: 64rpx;
+			width: 160rpx;
+			background: #f5f5f5;
+			border-radius: 8rpx;
+		}
+		.symbol {
+			padding: 0rpx 16rpx;
+			font-size: 32rpx;
+			color: rgba(0, 0, 0, 0.85);
+			font-weight: 400;
+		}
+	}
+}
+.qn-form-item {
+	width: 750rpx;
+	padding: 0rpx 32rpx;
+	background-color: #fff;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 2rpx solid #d8d8d8;
+	min-height: 80rpx;
+	.label {
+		flex-grow: 0;
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		margin-right: 20rpx;
+		.label__text {
+			font-size: 28rpx;
+			color: #000000;
+		}
+	}
+	.value {
+		flex-grow: 1;
+		flex-shrink: 1;
+		text-align: right;
+	}
+}
+.qn-form-item__title {
+	background-color: #f7f8fa;
+	padding: 20rpx 32rpx;
+	border: none;
+	.title {
+		font-size: 30rpx;
+		color: #888888;
+	}
+}
+.popup_modal {
+	width: 750rpx;
+	height: 600rpx;
+	background-color: #fff;
+	border-radius: 10px 10px 0 0;
+	.popup_modal-title {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 750rpx;
+		height: 88rpx;
+		font-weight: 600;
+		border-bottom: 2rpx solid #d8d8d8;
+	}
+	.popup_modal-scroll {
+		width: 750rpx;
+		height: 600rpx;
+		.popup_modal-scroll-item {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: flex-start;
+			width: 750rpx;
+			height: 88rpx;
+			padding: 0rpx 32rpx;
+			border-bottom: 2rpx solid #d8d8d8;
+		}
+	}
+}
+.upload-area {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 10rpx;
+	margin-bottom: 24rpx;
+	.idCard {
+		width: 324rpx;
+		height: 280rpx;
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+}
+.button-area {
+	width: 750rpx;
+	padding: 0 32rpx;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	// justify-content: space-between;
+	.button {
+		flex-grow: 0;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 10rpx;
+		.text {
+			font-size: 30rpx;
+			font-weight: 500;
+			text-align: center;
+		}
+	}
+	.button__cancel {
+		width: 270rpx;
+		height: 88rpx;
+		border: 2rpx solid #979797;
+	}
+	.button__submit {
+		// width: 400rpx;
+		width: 100%;
+		height: 88rpx;
+		background: #007aff;
+	}
+}
+</style>
--- a/pages/paper-details/index.vue
+++ b/pages/paper-details/index.vue
@ -0,0 +1,555 @@
+<template>
+	<view class="warpper">
+		<view class="swiper-dot">
+			<uni-swiper-dot :info="info" :current="current" field="content" mode="indexes" style="height: 100%;">
+				<swiper class="swiper-box" @change="change" style="height: 100%;">
+					<swiper-item v-for="(item, index) in info" :key="index">
+						<view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view>
+					</swiper-item>
+				</swiper>
+			</uni-swiper-dot>
+		</view>
+		<uGap></uGap>
+		<view class="info-box">
+			<view class="info">
+				<view class="price-row">
+					<text class="price">¥2300</text>
+					<text class="unit">/吨</text>
+				</view>
+				<view class="row">
+					<view class="name">
+						博汇朱雀白卡
+					</view>
+					<view class="value">
+						库存：9600张
+					</view>
+				</view>
+			</view>
+			<view class="list-box">
+				<view class="label">
+					克重：
+				</view>
+				<view class="tag-box" v-for="(titme, tindex) in 4" :key="tindex">
+					<text>240g</text>
+				</view>
+			</view>
+			<view class="list-box">
+				<view class="label" style="font-size: 24rpx;">
+					规格：
+				</view>
+				<view class="tag-box" v-for="(titme, tindex) in 2" :key="tindex">
+					<text>787*1092</text>
+				</view>
+			</view>
+		</view>
+		<uGap></uGap>
+		<view class="other">
+			<view class="title">
+				商品卖点
+			</view>
+			<view class="desc">
+				月结30天价格，不加服务费！
+			</view>
+		</view>
+		<view class="other">
+			<view class="title">
+				商品描述
+			</view>
+			<view class="desc">
+				售价全部为含税价，支持先用后付，欢迎来电查询！近期价格波动较大，请下单前先咨询价格。
+			</view>
+		</view>
+		<view class="other">
+			<view class="title">
+				送货说明
+			</view>
+			<view class="desc">
+				分切纸不足重量的，另加调机费；低于送货重量或超出送货范围的，运费另计。
+			</view>
+		</view>
+		<view class="other" style="border: none;">
+			<view class="title">
+				其他说明
+			</view>
+			<view class="desc">
+				无其他说明。
+			</view>
+		</view>
+		<qn-footer fixed height="100rpx">
+		  <view class="footer-row">
+		  	<view class="left">
+		  		<view class="">
+		  			<image class="icon" src="/static/imgs/paperDetails/shop-icon.png"></image>
+					<view class="label">
+						店铺
+					</view>
+		  		</view>
+				<view class="">
+					<image class="icon" src="/static/imgs/paperDetails/shopping-trolley.png"></image>
+					<view class="label">
+						购物车
+					</view>
+				</view>
+				<view class="" @tap='addShoppingTap'>
+					<image class="icon" src="/static/imgs/paperDetails/add-shopping-trolley.png"></image>
+					<view class="label">
+						加购物车
+					</view>
+				</view>
+		  	</view>
+			<view class="right">
+				<view class="inquiry-btn" @tap="inquiryTap">
+					立即询单
+				</view>
+				<view class="book-btn" @tap='addShoppingTap'>
+					立即订购
+				</view>
+			</view>
+		  </view>
+		</qn-footer>
+		<uni-popup ref="popup" type="bottom">
+			<view class="popup_modal">
+				<!-- <slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot> -->
+				<view class="card-box">
+					<view class="box">
+						<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+						<view class="right-box">
+							<view class="title-row">
+								<view class="name">
+									博汇朱雀白卡
+								</view>
+								<view class="close-icon" @tap="closeTap">
+									<uni-icons size="20" type="close" color="#888888"></uni-icons>
+								</view>
+							</view>
+							<view class="price">
+								¥7630.28
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="choose-box">
+					<view class="label">
+						请选择克重
+					</view>
+					<view class="tag-row">
+						<view 
+						:class="['tag-box', kgActive === kIndex ? 'kg-select' : '']" 
+						v-for="(kItem,kIndex) in weightList" 
+						:key='kIndex'
+						@tap="weightTap(kItem, kIndex)">
+						{{kItem}}g
+						</view>
+					</view>
+				</view>
+				<view class="choose-box">
+					<view class="label">
+						请选择规格
+					</view>
+					<view class="tag-row">
+						<view 
+						:class="['tag-box', ggActive === sIndex ? 'kg-select' : '']" 
+						v-for="(sItem,sIndex) in specificationList" 
+						:key='sIndex'
+						@tap="specificationTap(sItem, sIndex)">
+						{{sItem}}
+						</view>
+					</view>
+					<view class="input-row">
+						<view class="">
+							<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput>
+						</view>
+						<view class="symbol">
+							x
+						</view>
+						<view class="">
+							<uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="value" placeholder="请输入"></uni-easyinput>
+						</view>
+					</view>
+				</view>
+				<view class="quantity-row">
+					<view class="label">
+						购买数量(张)
+					</view>
+					<view class="">
+						<qnInputNumber @change="change"/>
+					</view>
+				</view>
+				<view class="ygzl-text">
+					预估重量：1.6346吨
+				</view>
+				<view class="popup-footer-row">
+					<view class="btn" @tap="confirm">
+						确认
+					</view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+import uGap from '@/components/u-gap/u-gap.vue'
+import qnFooter from '@/components/qn-footer/qn-footer.vue'
+import qnInputNumber from '@/components/qn-input-number/qn-input-number.vue'
+import { go2 } from '@/utils/hook.js'
+export default {
+	components: { uGap, qnFooter, qnInputNumber },
+	data() {
+		return {
+			info: [
+				{
+					content: '内容 A'
+				},
+				{
+					content: '内容 B'
+				},
+				{
+					content: '内容 C'
+				}
+			],
+			current: 0,
+			weightList: ['240', '250', '280'],
+			specificationList: ['正度', '大度', '特规分切'],
+			kgActive: 0,
+			ggActive: 0,
+			value: null,
+			
+		}
+	},
+	methods:{
+		addShoppingTap() {
+			this.$refs.popup.open('bottom')
+		},
+		// 路由到实单询比价
+		inquiryTap() {
+			go2('for-comparison', {id: null})
+		},
+		closeTap() {
+			this.$refs.popup.close()
+		},
+		// 重量切换
+		weightTap(item, index) {
+			this.kgActive = index
+		},
+		// 规格切换
+		specificationTap(item, index) {
+			this.ggActive = index
+		},
+		/**
+		 * @param {Number} num
+		 * 计数器返回值
+		 */
+		change(num) {
+			
+		},
+		// 确定
+		confirm() {
+			this.$refs.popup.close()
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.warpper {
+	.swiper-dot {
+		width: 100%;
+		height: 500rpx;
+	}
+	.image {
+		width: 100%;
+		height: 500rpx;
+	}
+	.info-box {
+		height: 370rpx;
+		background: #FFFFFF;
+		.info {
+			padding: 0rpx 32rpx;
+			.price-row {
+				padding: 20rpx 0rpx;
+			}
+			.price {
+				font-size: 48rpx;
+				color: #F5222D;
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 500;
+				
+			}
+			.unit {
+				font-size: 28rpx;
+				color: #F5222D;
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 400;
+			}
+			.row {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				padding-bottom: 20rpx;
+				.name {
+					font-size: 34rpx;
+					color: #000000;
+					letter-spacing: 0;
+					text-align: left;
+					font-weight: 600;
+				}
+				.value {
+					font-size: 24rpx;
+					color: rgba(0,0,0,0.55);
+					letter-spacing: 0;
+					text-align: left;
+					font-weight: 400;
+				}
+			}
+		}
+		.list-box {
+			margin: 0rpx 32rpx;
+			height: 104rpx;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			border-top: 2rpx solid rgba($color: #DDDDDD, $alpha: 0.8);
+			.label {
+				flex: 0 0 84rpx;
+				font-size: 28rpx;
+				color: #333333;
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 500;
+			}
+			.tag-box {
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				background: #F4F5F6;
+				border-radius: 4rpx;
+				font-size: 28rpx;
+				color: #555555;
+				letter-spacing: 0;
+				font-weight: 400;
+				margin-right: 10rpx;
+				padding: 0rpx 17rpx;
+			}
+		}
+	}
+	.other {
+		padding: 0rpx 32rpx;
+		border-bottom: 2rpx solid #D8D8D8;
+		background: #FFFFFF;
+		.title {
+			font-size: 28rpx;
+			color: #000000;
+			letter-spacing: 0;
+			font-weight: 500;
+			padding: 24rpx 0rpx 16rpx 0rpx;
+		}
+		.desc {
+			font-size: 28rpx;
+			color: #333333;
+			letter-spacing: 0;
+			font-weight: 400;
+			padding: 0rpx 0rpx 24rpx 0rpx;
+		}
+	}
+	.footer-row {
+		display: flex;
+		flex-direction: row;
+		// align-items: center;
+		justify-content: space-between;
+		padding: 0rpx 32rpx;
+		.left {
+			flex: 0 0 294rpx;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			text-align: center;
+			padding-right: 24rpx;
+			.icon {
+				width: 40rpx;
+				height: 40rpx;
+			}
+			.label {
+				font-size: 22rpx;
+				color: #555555;
+				letter-spacing: 0;
+				font-weight: 400;
+				padding-top: 6rpx;
+			}
+		}
+		.right {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			letter-spacing: 0;
+			text-align: center;
+			font-weight: 400;
+			.inquiry-btn{
+				width: 200rpx;
+				height: 80rpx;
+				line-height: 80rpx;
+				background: #FAAB0C;
+				border-top-left-radius: 2002000rpx;
+				border-bottom-left-radius: 2002000rpx;
+			}
+			.book-btn{
+				width: 200rpx;
+				height: 80rpx;
+				line-height: 80rpx;
+				background: #EE0A24;
+				border-top-right-radius: 2002000rpx;
+				border-bottom-right-radius: 2002000rpx;
+			}
+		}
+	}
+	.popup_modal {
+		// height: 960rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 0 0;
+		.card-box {
+			padding: 0rpx 32rpx;
+			.box {
+				display: flex;
+				flex-direction: row;
+				// align-items: center;
+				// height: 240rpx;
+				background: #FFFFFF;
+				border-bottom: 2rpx solid #D8D8D8; 
+				padding: 40rpx 0rpx;
+				.image {
+					flex: 0 0 160rpx;
+					width: 160rpx;
+					height: 160rpx;
+					border-radius: 10px;
+					margin-right: 20rpx;
+				}
+				.right-box {
+					flex: 1;
+					width: 100%;
+					padding-top: 10rpx;
+				}
+				.title-row {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					.name {
+						font-size: 34rpx;
+						color: #000000;
+						letter-spacing: 0;
+						text-align: left;
+						font-weight: 600;
+						padding-bottom: 30rpx;
+					}
+					.close-icon{
+						position: relative;
+						top: -20rpx;
+					}
+				}
+				.price{
+					font-size: 40rpx;
+					color: #F5222D;
+					letter-spacing: 0;
+					text-align: left;
+					font-weight: 600;
+				}
+			}
+		}
+		.choose-box{
+			border-bottom: 2rpx solid #D8D8D8;
+			padding: 24rpx 32rpx;
+			.label{
+				font-size: 30rpx;
+				color: rgba(0,0,0,0.85);
+				letter-spacing: 0;
+				text-align: left;
+				font-weight: 400;
+				padding: 0rpx 0rpx 20rpx 0rpx;
+			}
+			.tag-row {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+			}
+			.tag-box{
+				padding: 0rpx 47rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				background: #F5F5F5;
+				border-radius: 8px;
+				margin-right: 12rpx;
+				font-size: 28rpx;
+				color: rgba(0,0,0,0.75);
+				text-align: center;
+				font-weight: 400;
+			}
+			.kg-select {
+				background: #1890FF;
+				color: #FFFFFF;
+				
+			}
+			.input-row{
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				padding-top: 20rpx;
+				.easyinput{
+					height: 64rpx;
+					background: #F5F5F5;
+					border-radius: 8rpx;
+				}
+				.symbol{
+					padding: 0rpx 16rpx;
+					font-size: 32rpx;
+					color: rgba(0,0,0,0.85);
+					font-weight: 400;
+				}
+			}
+		}
+		.quantity-row{
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			padding: 32rpx 32rpx 0rpx 32rpx;
+			.label{
+				font-size: 30rpx;
+				color: rgba(0,0,0,0.85);
+				letter-spacing: 0;
+				font-weight: 400;
+			}
+		}
+		.ygzl-text{
+			padding:20rpx  32rpx 0rpx ;
+			display: flex;
+			flex-direction: row;
+			justify-content: flex-end;
+			font-family: PingFangSC-Regular;
+			font-size: 24rpx;
+			color: rgba(0,0,0,0.50);
+			font-weight: 400;
+		}
+		.popup-footer-row {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			padding: 48rpx 32rpx 20rpx 32rpx;
+			.btn {
+				width: 686rpx;
+				height: 96rpx;
+				line-height: 96rpx;
+				text-align: center;
+				background: #007AFF;
+				border-radius: 10rpx;
+				font-size: 36rpx;
+				color: #FFFFFF;
+				font-weight: 500;
+			}
+		}
+	}
+}
+</style>
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@ -27,9 +27,12 @@
 			/>
 		</view>
 		<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
-			<view class="content" v-for="(item, index) in 4" :key="index">
-				<view class="box">
+			<view class="content" >
+				<view class="box" v-for="(item, index) in 7" :key="index">
 					<view class="image-box">
+						<view class="">
+							<image class="special-img" src="/static/imgs/store/special-offe.png" mode=""></image>
+						</view>
 						<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
 					</view>
 					<view class="title">
@ -39,7 +42,6 @@
 						<view class="">
 							<image class="icon" src="/static/imgs/store/address-icon.png"></image>
 							<text style="padding-left: 6rpx;">广州市</text>
-							
 						</view>
 						<view class="">
 							库存:9600张
@ -50,13 +52,16 @@
 							<text class="price">¥2300</text>
 							<text class="unit">/吨</text>
 						</view>
-						<view class="btn">
+						<view class="btn" @tap="seeDetailsTap(item)">
 							马上抢
 						</view>
 					</view>
 				</view>
-				<view class="box">
+				<!-- <view class="box">
 					<view class="image-box">
+						<view class="">
+							<image class="special-img" src="/static/imgs/store/special-offe.png" mode=""></image>
+						</view>
 						<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
 					</view>
 					<view class="title">
@ -81,7 +86,7 @@
 							马上抢
 						</view>
 					</view>
-				</view>
+				</view> -->
 			</view>
 		</scroll-list>
 	</view>
@ -89,6 +94,7 @@

 <script>
 	import qnHeader from '@/components/qn-header/qn-header.vue'
+	import { go2 } from '@/utils/hook.js'
 	export default {
 		components: {qnHeader},
 		data() {
@ -110,6 +116,9 @@
 			}
 		},
 		methods: {
+			seeDetailsTap(item) {
+				go2('paper-details', {id: null})
+			},
 			getList() {
 				// return new Promise((resolve, reject) => {
 				// 	getDeviceInfo({ ...this.params, ...this.pagination })
@ -135,24 +144,24 @@
 				// })
 			},
 			downCallback() {
-				this.pagination.pageNum = 1
-				this.getList()
-					.then(({ list, total }) => {
-						this.$refs.list.refreshSuccess({ list, total })
-					})
-					.catch(() => {
-						this.$refs.list.refreshFail()
-					})
+				// this.pagination.pageNum = 1
+				// this.getList()
+				// 	.then(({ list, total }) => {
+				// 		this.$refs.list.refreshSuccess({ list, total })
+				// 	})
+				// 	.catch(() => {
+				// 		this.$refs.list.refreshFail()
+				// 	})
 			},
 			upCallback() {
-				this.pagination.pageNum++
-				this.getList()
-					.then(({ list, total }) => {
-						this.$refs.list.loadSuccess({ list, total })
-					})
-					.catch(() => {
-						this.$refs.list.loadFail()
-					})
+				// this.pagination.pageNum++
+				// this.getList()
+				// 	.then(({ list, total }) => {
+				// 		this.$refs.list.loadSuccess({ list, total })
+				// 	})
+				// 	.catch(() => {
+				// 		this.$refs.list.loadFail()
+				// 	})
 			},
 			search() {},
 			addHistory(value) {}
@ -260,15 +269,25 @@
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
+		flex-wrap: wrap;
 		padding: 0rpx 32rpx 20rpx 32rpx;
 		.box {
 			// height: 514rpx;
 			background: #FFFFFF;
 			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(112,112,112,0.1);
 			border-radius: 10rpx;
+			.special-img {
+				width: 110rpx;
+				height: 110rpx;
+				position: absolute;
+				z-index: 10;
+				
+			}
 			.image {
 				width: 330rpx;
 				height: 330rpx;
+				z-index: 9;
+				border-top-left-radius: 10rpx;
 			}
 			.title {
 				padding: 0rpx 16rpx;
--- a/static/imgs/paperDetails/add-shopping-trolley.png
+++ b/static/imgs/paperDetails/add-shopping-trolley.png
--- a/static/imgs/paperDetails/shop-icon.png
+++ b/static/imgs/paperDetails/shop-icon.png
--- a/static/imgs/paperDetails/shopping-trolley.png
+++ b/static/imgs/paperDetails/shopping-trolley.png
--- a/static/imgs/store/special-offe.png
+++ b/static/imgs/store/special-offe.png
--- a/uni_modules/uni-popup/changelog.md
+++ b/uni_modules/uni-popup/changelog.md
@ -1,3 +1,5 @@
+## 1.7.3（2022-01-13）
+- 修复 设置 safeArea 属性不生效的bug
 ## 1.7.2（2021-11-26）
 - 优化 组件示例
 ## 1.7.1（2021-11-26）
--- a/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
+++ b/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
@ -162,7 +162,7 @@
 	}
 </script>

-<style lang="scss" scoped>
+<style lang="scss" >
 	.uni-popup-dialog {
 		width: 300px;
 		border-radius: 11px;
--- a/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
+++ b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
@ -71,7 +71,7 @@
 		}
 	}
 </script>
-<style lang="scss" scoped>
+<style lang="scss" >
 	.uni-popup-message {
 		/* #ifndef APP-NVUE */
 		display: flex;
--- a/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
+++ b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
@ -103,7 +103,7 @@
 		}
 	}
 </script>
-<style lang="scss" scoped>
+<style lang="scss" >
 	.uni-popup-share {
 		background-color: #fff;
 		border-top-left-radius: 11px;
--- a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
+++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
@ -151,12 +151,17 @@ export default {
 	},
 	mounted() {
 		const fixSize = () => {
-			const { windowWidth, windowHeight, windowTop, safeAreaInsets } = uni.getSystemInfoSync()
+			const { windowWidth, windowHeight, windowTop, safeArea,screenHeight ,safeAreaInsets } = uni.getSystemInfoSync()
 			this.popupWidth = windowWidth
 			this.popupHeight = windowHeight + windowTop
-			// 是否适配底部安全区
-			if(this.safeArea){
-				this.safeAreaInsets = safeAreaInsets
+			// TODO 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
+			if(safeArea){
+				// #ifdef MP-WEIXIN
+				this.safeAreaInsets = screenHeight - safeArea.bottom
+				// #endif
+				// #ifndef MP-WEIXIN
+				this.safeAreaInsets = safeAreaInsets.bottom
+				// #endif
 			}else{
 				this.safeAreaInsets = 0
 			}
@ -273,13 +278,12 @@ export default {
 		bottom(type) {
 			this.popupstyle = 'bottom'
 			this.ani = ['slide-bottom']
-
 			this.transClass = {
 				position: 'fixed',
 				left: 0,
 				right: 0,
 				bottom: 0,
-				paddingBottom: (this.safeAreaInsets && this.safeAreaInsets.bottom) || 0,
+				paddingBottom: this.safeAreaInsets+'px',
 				backgroundColor: this.bg
 			}
 			// TODO 兼容 type 属性 ，后续会废弃
@ -352,7 +356,7 @@ export default {
 	}
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss" >
 .uni-popup {
 	position: fixed;
 	/* #ifndef APP-NVUE */
--- a/uni_modules/uni-popup/package.json
+++ b/uni_modules/uni-popup/package.json
@ -1,7 +1,7 @@
 {
 	"id": "uni-popup",
 	"displayName": "uni-popup 弹出层",
-	"version": "1.7.2",
+	"version": "1.7.3",
 	"description": " Popup 组件，提供常用的弹层",
 	"keywords": [
        "uni-ui",
--- a/uni_modules/uni-swiper-dot/changelog.md
+++ b/uni_modules/uni-swiper-dot/changelog.md
@ -0,0 +1,12 @@
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.6（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的Bug
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 clickItem 事件，支持指示点控制轮播
+- 新增 支持 pc 可用
--- a/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
+++ b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
@ -0,0 +1,218 @@
+<template>
+	<view class="uni-swiper__warp">
+		<slot />
+		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
+		</view>
+		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item" />
+		</view>
+		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
+		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item " />
+		</view>
+		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
+			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
+		</view>
+		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * SwiperDod 轮播图指示点
+	 * @description 自定义轮播图指示点
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
+	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
+	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
+	 * 	@value defualt 默认指示点
+	 * 	@value round 圆形指示点
+	 * 	@value nav 条形指示点
+	 * 	@value indexes 索引指示点
+	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
+	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
+	 * @property {Object} dotsStyles 指示点样式
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'UniSwiperDot',
+		emits:['clickItem'],
+		props: {
+			info: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			dotsStyles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 类型 ：default(默认) indexes long nav
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			// 只在 nav 模式下生效，变量名称
+			field: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				dots: {
+					width: 6,
+					height: 6,
+					bottom: 10,
+					color: '#fff',
+					backgroundColor: 'rgba(0, 0, 0, .3)',
+					border: '1px rgba(0, 0, 0, .3) solid',
+					selectedBackgroundColor: '#333',
+					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+				}
+			}
+		},
+		watch: {
+			dotsStyles(newVal) {
+				this.dots = Object.assign(this.dots, this.dotsStyles)
+			},
+			mode(newVal) {
+				if (newVal === 'indexes') {
+					this.dots.width = 14
+					this.dots.height = 14
+				} else {
+					this.dots.width = 6
+					this.dots.height = 6
+				}
+			}
+
+		},
+		created() {
+			if (this.mode === 'indexes') {
+				this.dots.width = 12
+				this.dots.height = 12
+			}
+			this.dots = Object.assign(this.dots, this.dotsStyles)
+		},
+		methods: {
+			clickItem(index) {
+				this.$emit('clickItem', index)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-swiper__warp {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-swiper__dots-box {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-item {
+		width: 8px;
+		border-radius: 100px;
+		margin-left: 6px;
+		background-color: rgba(0, 0, 0, 0.4);
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+		/* #ifdef H5 */
+		// border-width: 5px 0;
+		// border-style: solid;
+		// border-color: transparent;
+		// background-clip: padding-box;
+		/* #endif */
+		// transition: width 0.2s linear;  不要取消注释，不然会不能变色
+	}
+
+	.uni-swiper__dots-item:first-child {
+		margin: 0;
+	}
+
+	.uni-swiper__dots-default {
+		border-radius: 100px;
+	}
+
+	.uni-swiper__dots-long {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-bar {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-nav {
+		bottom: 0px;
+		// height: 26px;
+		padding: 8px 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+
+	.uni-swiper__dots-nav-item {
+		/* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+		font-size: 14px;
+		color: #fff;
+		margin: 0 15px;
+	}
+
+	.uni-swiper__dots-indexes {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-indexes-text {
+		color: #fff;
+		font-size: 12px;
+		line-height: 14px;
+	}
+</style>
--- a/uni_modules/uni-swiper-dot/package.json
+++ b/uni_modules/uni-swiper-dot/package.json
@ -0,0 +1,87 @@
+{
+  "id": "uni-swiper-dot",
+  "displayName": "uni-swiper-dot 轮播图指示点",
+  "version": "1.2.0",
+  "description": "自定义轮播图指示点组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "轮播图指示点",
+    "dot",
+    "swiper"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/uni-swiper-dot/readme.md
+++ b/uni_modules/uni-swiper-dot/readme.md
@ -0,0 +1,11 @@
+
+
+## SwiperDot 轮播图指示点
+> **组件名：uni-swiper-dot**
+> 代码块： `uSwiperDot`
+
+
+自定义轮播图指示点
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839