纸品详情

4 years ago · 27c1806292
21 changed files with 1300 additions and 60 deletions
--- a/App.vue
+++ b/App.vue
@ -15,7 +15,7 @@ export default {
    } else {
      console.log('非分享进入', store.state.supplierId)
      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
@ -58,7 +58,14 @@
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
      }
-    }
+    },
+	{
+	  "path": "pages/paper-details/index",
+	  "style": {
+	    "navigationBarTitleText": "纸品详情",
+	    "enablePullDownRefresh": false
+	  }
+	}
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
--- 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/paper-details/index.vue
+++ b/pages/paper-details/index.vue
@ -0,0 +1,550 @@
+<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">
+					立即询单
+				</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'
+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')
+		},
+		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