qniao
/
paper-shopkeeper-H5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

devlop
邓雄飞 4 years ago
parent
525365cbb2 8c5bc05a94
commit
c3ade483db
24 changed files with 2320 additions and 65 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      App.vue
  2. 73
      components/qn-input-number/qn-input-number.vue
  3. 24
      components/u-gap/u-gap.vue
  4. 23
      pages.json
  5. 208
      pages/add-address-manage/index.vue
  6. 206
      pages/address-manage/index.vue
  7. 283
      pages/cart/index.vue
  8. 592
      pages/for-comparison/index.vue
  9. 555
      pages/paper-details/index.vue
  10. 63
      pages/store/index.vue
  11. BIN
      static/imgs/paperDetails/add-shopping-trolley.png
  12. BIN
      static/imgs/paperDetails/shop-icon.png
  13. BIN
      static/imgs/paperDetails/shopping-trolley.png
  14. BIN
      static/imgs/store/special-offe.png
  15. 2
      uni_modules/uni-popup/changelog.md
  16. 2
      uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
  17. 2
      uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
  18. 2
      uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
  19. 18
      uni_modules/uni-popup/components/uni-popup/uni-popup.vue
  20. 2
      uni_modules/uni-popup/package.json
  21. 12
      uni_modules/uni-swiper-dot/changelog.md
  22. 218
      uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
  23. 87
      uni_modules/uni-swiper-dot/package.json
  24. 11
      uni_modules/uni-swiper-dot/readme.md

2
App.vue
View File

@ -14,7 +14,7 @@ export default {
} }
} else { } else {
if (!store.state.supplierId) { if (!store.state.supplierId) {
go2('error')
// go2('error')
} }
} }
}, },

73
components/qn-input-number/qn-input-number.vue
View File

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

24
components/u-gap/u-gap.vue
View File

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

23
pages.json
View File

@ -82,7 +82,28 @@
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"navigationStyle": "custom" "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": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",

208
pages/add-address-manage/index.vue
View File

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

206
pages/address-manage/index.vue
View File

@ -1,12 +1,58 @@
<template> <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> </template>
<script> <script>
import { go2, back, setCache } from '@/utils/hook.js' import { go2, back, setCache } from '@/utils/hook.js'
import qnFooter from '@/components/qn-footer/qn-footer.vue'
export default { export default {
components:{ qnFooter },
data() { data() {
return { return {
/** /**
@ -24,7 +70,22 @@ export default {
setCache('address', item) setCache('address', item)
back() 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) { onLoad(option) {
if (option) { if (option) {
@ -34,4 +95,139 @@ export default {
} }
</script> </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>

283
pages/cart/index.vue
View File

@ -1,40 +1,273 @@
<template> <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> </view>
</template> </template>
<script> <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> </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; 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> </style>

592
pages/for-comparison/index.vue
View File

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

555
pages/paper-details/index.vue
View File

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

63
pages/store/index.vue
View File

@ -27,9 +27,12 @@
/> />
</view> </view>
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> <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-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> <image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
</view> </view>
<view class="title"> <view class="title">
@ -39,7 +42,6 @@
<view class=""> <view class="">
<image class="icon" src="/static/imgs/store/address-icon.png"></image> <image class="icon" src="/static/imgs/store/address-icon.png"></image>
<text style="padding-left: 6rpx;">广州市</text> <text style="padding-left: 6rpx;">广州市</text>
</view> </view>
<view class=""> <view class="">
库存:9600张 库存:9600张
@ -50,13 +52,16 @@
<text class="price">¥2300</text> <text class="price">¥2300</text>
<text class="unit">/吨</text> <text class="unit">/吨</text>
</view> </view>
<view class="btn">
<view class="btn" @tap="seeDetailsTap(item)">
马上抢 马上抢
</view> </view>
</view> </view>
</view> </view>
<view class="box">
<!-- <view class="box">
<view class="image-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> <image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
</view> </view>
<view class="title"> <view class="title">
@ -81,7 +86,7 @@
马上抢 马上抢
</view> </view>
</view> </view>
</view>
</view> -->
</view> </view>
</scroll-list> </scroll-list>
</view> </view>
@ -89,6 +94,7 @@
<script> <script>
import qnHeader from '@/components/qn-header/qn-header.vue' import qnHeader from '@/components/qn-header/qn-header.vue'
import { go2 } from '@/utils/hook.js'
export default { export default {
components: {qnHeader}, components: {qnHeader},
data() { data() {
@ -110,6 +116,9 @@
} }
}, },
methods: { methods: {
seeDetailsTap(item) {
go2('paper-details', {id: null})
},
getList() { getList() {
// return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
// getDeviceInfo({ ...this.params, ...this.pagination }) // getDeviceInfo({ ...this.params, ...this.pagination })
@ -135,24 +144,24 @@
// }) // })
}, },
downCallback() { 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() { 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() {}, search() {},
addHistory(value) {} addHistory(value) {}
@ -260,15 +269,25 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
padding: 0rpx 32rpx 20rpx 32rpx; padding: 0rpx 32rpx 20rpx 32rpx;
.box { .box {
// height: 514rpx; // height: 514rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(112,112,112,0.1); box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(112,112,112,0.1);
border-radius: 10rpx; border-radius: 10rpx;
.special-img {
width: 110rpx;
height: 110rpx;
position: absolute;
z-index: 10;
}
.image { .image {
width: 330rpx; width: 330rpx;
height: 330rpx; height: 330rpx;
z-index: 9;
border-top-left-radius: 10rpx;
} }
.title { .title {
padding: 0rpx 16rpx; padding: 0rpx 16rpx;

BIN
static/imgs/paperDetails/add-shopping-trolley.png
View File

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

BIN
static/imgs/paperDetails/shop-icon.png
View File

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

BIN
static/imgs/paperDetails/shopping-trolley.png
View File

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

BIN
static/imgs/store/special-offe.png
View File

Before After
Width: 110  |  Height: 110  |  Size: 3.0 KiB

2
uni_modules/uni-popup/changelog.md
View File

@ -1,3 +1,5 @@
## 1.7.3（2022-01-13）
- 修复 设置 safeArea 属性不生效的bug
## 1.7.2（2021-11-26） ## 1.7.2（2021-11-26）
- 优化 组件示例 - 优化 组件示例
## 1.7.1（2021-11-26） ## 1.7.1（2021-11-26）

2
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
View File

@ -162,7 +162,7 @@
} }
</script> </script>
<style lang="scss" scoped>
<style lang="scss" >
.uni-popup-dialog { .uni-popup-dialog {
width: 300px; width: 300px;
border-radius: 11px; border-radius: 11px;

2
uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
View File

@ -71,7 +71,7 @@
} }
} }
</script> </script>
<style lang="scss" scoped>
<style lang="scss" >
.uni-popup-message { .uni-popup-message {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;

2
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
View File

@ -103,7 +103,7 @@
} }
} }
</script> </script>
<style lang="scss" scoped>
<style lang="scss" >
.uni-popup-share { .uni-popup-share {
background-color: #fff; background-color: #fff;
border-top-left-radius: 11px; border-top-left-radius: 11px;

18
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
View File

@ -151,12 +151,17 @@ export default {
}, },
mounted() { mounted() {
const fixSize = () => { const fixSize = () => {
const { windowWidth, windowHeight, windowTop, safeAreaInsets } = uni.getSystemInfoSync()
const { windowWidth, windowHeight, windowTop, safeArea,screenHeight ,safeAreaInsets } = uni.getSystemInfoSync()
this.popupWidth = windowWidth this.popupWidth = windowWidth
this.popupHeight = windowHeight + windowTop 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{ }else{
this.safeAreaInsets = 0 this.safeAreaInsets = 0
} }
@ -273,13 +278,12 @@ export default {
bottom(type) { bottom(type) {
this.popupstyle = 'bottom' this.popupstyle = 'bottom'
this.ani = ['slide-bottom'] this.ani = ['slide-bottom']
this.transClass = { this.transClass = {
position: 'fixed', position: 'fixed',
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
paddingBottom: (this.safeAreaInsets && this.safeAreaInsets.bottom) || 0,
paddingBottom: this.safeAreaInsets+'px',
backgroundColor: this.bg backgroundColor: this.bg
} }
// TODO 兼容 type 属性 ，后续会废弃 // TODO 兼容 type 属性 ，后续会废弃
@ -352,7 +356,7 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
<style lang="scss" >
.uni-popup { .uni-popup {
position: fixed; position: fixed;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */

2
uni_modules/uni-popup/package.json
View File

@ -1,7 +1,7 @@
{ {
"id": "uni-popup", "id": "uni-popup",
"displayName": "uni-popup 弹出层", "displayName": "uni-popup 弹出层",
"version": "1.7.2",
"version": "1.7.3",
"description": " Popup 组件，提供常用的弹层", "description": " Popup 组件，提供常用的弹层",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",

12
uni_modules/uni-swiper-dot/changelog.md
View File

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

218
uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
View File

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

87
uni_modules/uni-swiper-dot/package.json
View File

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

11
uni_modules/uni-swiper-dot/readme.md
View File

@ -0,0 +1,11 @@
## SwiperDot 轮播图指示点
> **组件名：uni-swiper-dot**
> 代码块： `uSwiperDot`
自定义轮播图指示点
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
Write Preview
Loading…
Cancel
Save