tianyi@bogon
3 years ago
4 changed files with 1307 additions and 0 deletions
@ -0,0 +1,549 @@ |
|||
<template> |
|||
<view class="page1"> |
|||
<view class="title-box"> |
|||
<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入商品名称/编号" cancelButton="none" |
|||
@confirm="search" /> |
|||
</view> |
|||
<view class="content-box"> |
|||
<view class="content-left"> |
|||
<view class="left-box" v-for="(item, index) in indexList" :key="item" |
|||
:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)"> |
|||
<text style="padding: 0 40rpx;" :class="item.parentId ? 'red' :''">{{item.categoryName}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="content-right"> |
|||
<view class="right-box" v-for="item in shopList" :key="item"> |
|||
<view class="box-left"> |
|||
<img :src="item.productPicture" alt=""> |
|||
</view> |
|||
<view class="box-right"> |
|||
<view class="box-right-name">{{item.productName}}</view> |
|||
<view class="box-right-num">{{item.productSn}}</view> |
|||
<view class="box-right-price"> |
|||
<view class="price-box"> |
|||
<text>{{item.purchasePrice}}</text> |
|||
<text>采购价</text> |
|||
</view> |
|||
<view class="price-box"> |
|||
<text>{{item.wholesalePrice}}</text> |
|||
<text>批发价</text> |
|||
</view> |
|||
<view class="price-box"> |
|||
<text>{{item.price}}</text> |
|||
<text>零售价</text> |
|||
</view> |
|||
<view class="price-box"> |
|||
<text>{{item.stockCount}}</text> |
|||
<text>库存</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<checkbox-group @change="checkboxChange"> |
|||
<label> |
|||
<checkbox :value="item.id" class="checkbox" /> |
|||
</label> |
|||
</checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom-box"> |
|||
<view class="bottom-left"> |
|||
<view class="bottom-left-box"> |
|||
<uni-icons type="cart" size="20" color="#646566"></uni-icons> |
|||
<text class="uni-tab__text">已选择</text> |
|||
</view> |
|||
<text style="background-color:#ff0000;color:#fff;position: absolute;top: 0;right: 10rpx;" |
|||
class="uni-tab__dot">{{ info }}</text> |
|||
</view> |
|||
<view class="bottom-right"> |
|||
<view class="bottom-btn" open-type="share" @tap="toggle('bottom')">选好了</view> |
|||
</view> |
|||
</view> |
|||
<!-- 弹出层 --> |
|||
<view> |
|||
<uni-popup ref="popup" background-color="#fff" @change="change"> |
|||
<view class="popup-content"> |
|||
<view class="popup-title"> |
|||
<view class="popup-title-left"> |
|||
<img src="/static/images/logo.png" alt=""> |
|||
</view> |
|||
<view class="popup-title-right"> |
|||
<view class="popup-title-right-box" style="color: #088FEB;">创意小众单肩包</view> |
|||
<view class="popup-title-right-box">QS2023101001</view> |
|||
<view class="popup-title-right-box" style="color: darkorange;" @tap="inputDialogToggle"> |
|||
<text style="margin-right:20rpx;">￥0.00</text> |
|||
<uni-icons color="#088FEB" type="compose" size="16" style="color:#088FEB"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="popup-container"> |
|||
<ul> |
|||
<!-- <li v-for="items in attrList" :key="items.id"> --> |
|||
<li> |
|||
<view class="title-fur"> |
|||
<view class="name">男装</view> |
|||
</view> |
|||
<view class="content-fur"> |
|||
<!-- <view class="content-low" v-for="item in items.attributeValue" :key="item.id" @tap="delItem(item, 'attrNameDel')">男装</view> --> |
|||
<view class="content-low">男装</view> |
|||
</view> |
|||
</li> |
|||
</ul> |
|||
<view class="checkList"> |
|||
<view class="checkList-box"> |
|||
<text>女装</text> |
|||
<text>S码</text> |
|||
<text>黄色</text> |
|||
</view> |
|||
<uni-number-box :value="numberValue" @change="change" /> |
|||
</view> |
|||
</view> |
|||
<view class="popup-bottom"> |
|||
<view class="popup-bottom-left"> |
|||
<text>2 款 9 件</text> |
|||
<text>￥2952.00</text> |
|||
</view> |
|||
<view class="popup-bottom-right"> |
|||
<view class="bottom-btn" @tap="">选好了</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
<!-- 弹出输入框 --> |
|||
<uni-popup ref="inputDialog" type="dialog"> |
|||
<uni-popup-dialog ref="inputClose" mode="input" title="临时改价" placeholder="请输入临时售价" |
|||
@confirm="dialogInputConfirm"></uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
indexList: [], |
|||
pageNum: 1, //分页的页码 |
|||
shopList: [], |
|||
info: 0, |
|||
categoryId: '', //分类id |
|||
searchName: '', //搜索框输入值 |
|||
shopId: '', //店铺id, |
|||
checkbox: [], //需要分享的商品id |
|||
numberValue: 0, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getGategoryList() |
|||
}, |
|||
methods: { |
|||
//初始化获取分类列表 |
|||
getGategoryList() { |
|||
this.tui.request("/app/productCategory/list", "get", { |
|||
// shopId: 1, |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.indexList = res.result; |
|||
for (var i = 0; i < this.indexList.length; i++) { |
|||
if (i == 0) { |
|||
this.indexList[i].parentId = true |
|||
} else { |
|||
this.indexList[i].parentId = false |
|||
} |
|||
} |
|||
this.getShareList(this.indexList[0].id); |
|||
} else {} |
|||
}).catch((res) => {}) |
|||
}, |
|||
//点击分类获取商品列表 |
|||
getShareList(id) { |
|||
this.tui.request("/app/product/getShareList", "POST", { |
|||
shopId: '002', |
|||
// categoryId:id || '1695090289036890112', |
|||
categoryId: '1695090289036890112', |
|||
// supplierName:this.searchName || '测试', |
|||
supplierName: '测试', |
|||
pageNum: this.pageNum, |
|||
pageSize: '10' |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
console.log(res.result.records) |
|||
this.shopList = res.result.records |
|||
} else {} |
|||
}).catch((res) => {}) |
|||
}, |
|||
//获取弹出层状态 |
|||
change(e) { |
|||
console.log('当前模式：' + e.type + ',状态：' + e.show); |
|||
}, |
|||
//弹出商品规格选择 |
|||
toggle(type) { |
|||
this.type = type |
|||
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性 |
|||
this.$refs.popup.open(type) |
|||
}, |
|||
// //底部左侧购物车按钮 |
|||
// onClick(e) { |
|||
// uni.showToast({ |
|||
// title: `点击${e.content.text}`, |
|||
// icon: 'none' |
|||
// }) |
|||
// }, |
|||
//底部右侧两个分享按钮 |
|||
buttonClick(e) { |
|||
|
|||
if (e == 'all') { |
|||
console.log("全部") |
|||
} else { |
|||
console.log("单个") |
|||
} |
|||
this.options[0].info++ |
|||
}, |
|||
//顶部搜索框 |
|||
search(res) { |
|||
this.searchName = res.value |
|||
uni.showToast({ |
|||
title: '搜索：' + res.value, |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
//点击左侧菜单切换 |
|||
clickLeftBtn(index) { |
|||
for (var i = 0; i < this.indexList.length; i++) { |
|||
if (i == index) { |
|||
this.indexList[i].parentId = true |
|||
} else { |
|||
this.indexList[i].parentId = false |
|||
} |
|||
} |
|||
this.getShareList(this.indexList[index].id) |
|||
}, |
|||
//选中商品 |
|||
checkboxChange(e) { |
|||
var items = this.shopList, |
|||
values = e.detail.value; |
|||
for (var i = 0, lenI = items.length; i < lenI; ++i) { |
|||
const item = items[i] |
|||
if (values.includes(item.id)) { |
|||
this.$set(item, 'checked', true) |
|||
} else { |
|||
this.$set(item, 'checked', false) |
|||
} |
|||
} |
|||
}, |
|||
//点击分享按钮 |
|||
clickShareBtn(e) { |
|||
if (e == 'all') { |
|||
console.log("全部"); |
|||
} else { |
|||
console.log("单个") |
|||
} |
|||
this.info++ |
|||
}, |
|||
//分享功能（path中带着一个id，用户点击后拿着id跳转到一个客户商品选择页） |
|||
onShareAppMessage() { |
|||
return { |
|||
title: '商品分类', |
|||
path: '/pages/login/login?id=123', |
|||
} |
|||
}, |
|||
inputDialogToggle() { |
|||
this.$refs.inputDialog.open() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
height: 100%; |
|||
} |
|||
|
|||
.page1 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 92%; |
|||
} |
|||
|
|||
.uni-tab__dot { |
|||
padding: 0 4px; |
|||
line-height: 15px; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
background-color: #ff0000; |
|||
border-radius: 15px; |
|||
} |
|||
|
|||
.popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px; |
|||
height: 1200rpx; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.popup-title-right-box { |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
|
|||
.popup-title-right { |
|||
width: 400rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
|
|||
.popup-title-left { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.popup-title-left image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
|
|||
} |
|||
|
|||
.popup-title { |
|||
display: flex; |
|||
height: 180rpx; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
.popup-container { |
|||
width: 95%; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
height: auto; |
|||
margin: 20upx auto; |
|||
} |
|||
|
|||
.uni-tab__text { |
|||
font-size: 12px; |
|||
color: #646566; |
|||
} |
|||
|
|||
.title-box { |
|||
background: #fff; |
|||
} |
|||
|
|||
.bottom-box { |
|||
width: 100%; |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
} |
|||
|
|||
.bottom-left { |
|||
width: 15%; |
|||
position: relative; |
|||
} |
|||
|
|||
.bottom-right { |
|||
width: 85%; |
|||
|
|||
.bottom-btn { |
|||
width: 85%; |
|||
line-height: 35px; |
|||
height: 70rpx; |
|||
text-align: center; |
|||
margin-top: 10rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
margin: 0 auto; |
|||
background: linear-gradient(90deg, #60F3FF, #088FEB); |
|||
border-radius: 70rpx; |
|||
} |
|||
} |
|||
|
|||
.bottom-left-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
} |
|||
|
|||
.content-box { |
|||
background: #fff; |
|||
flex: 1; |
|||
display: flex; |
|||
} |
|||
|
|||
.content-left { |
|||
width: 170rpx; |
|||
background: #eee; |
|||
height: 100%; |
|||
} |
|||
|
|||
.left-box { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
line-height: 90rpx; |
|||
border-bottom: 1px solid #fff; |
|||
} |
|||
|
|||
.left-box-hover { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
line-height: 90rpx; |
|||
border-bottom: 1px solid #fff; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.red { |
|||
border-right: 3px solid red; |
|||
} |
|||
|
|||
.content-right { |
|||
width: 550rpx; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.right-box { |
|||
width: 100%; |
|||
height: 190rpx; |
|||
display: flex; |
|||
border-bottom: 1px solid #eee; |
|||
position: relative; |
|||
} |
|||
|
|||
.box-left { |
|||
width: 130rpx; |
|||
height: 131rpx; |
|||
background-size: 100%; |
|||
margin: 25rpx 30rpx 35rpx 10rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.box-left img { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
} |
|||
|
|||
.box-right { |
|||
margin-top: 17rpx; |
|||
} |
|||
|
|||
.box-right-name { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.box-right-num { |
|||
padding: 5rpx 0; |
|||
color: #777; |
|||
} |
|||
|
|||
.box-right-price { |
|||
display: flex; |
|||
font-size: 25rpx; |
|||
} |
|||
|
|||
.checkbox { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
position: absolute; |
|||
top: 20rpx; |
|||
right: 30rpx; |
|||
} |
|||
|
|||
.price-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.price-box text:first-child { |
|||
color: #ffa200 |
|||
} |
|||
|
|||
.uni-tab__cart-button-right, |
|||
.uni-tab__cart-sub-right { |
|||
display: none; |
|||
flex: none; |
|||
} |
|||
|
|||
.title-fur { |
|||
width: 95%; |
|||
height: 70rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.name { |
|||
font-size: 30rpx; |
|||
width: 50%; |
|||
float: left; |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
} |
|||
|
|||
.content-fur { |
|||
padding-bottom: 25rpx; |
|||
} |
|||
|
|||
.content-low { |
|||
width: auto; |
|||
border: 1px solid #eee; |
|||
display: inline-block; |
|||
min-width: 90rpx; |
|||
padding: 5rpx; |
|||
font-size: 35rpx; |
|||
text-align: center; |
|||
color: #777; |
|||
margin: 20rpx 0 0 20rpx; |
|||
} |
|||
|
|||
.content-low:hover { |
|||
background: #eee; |
|||
} |
|||
|
|||
.checkList { |
|||
display: flex; |
|||
height: 50rpx; |
|||
font-size: 28rpx; |
|||
line-height: 50rpx; |
|||
padding: 20rpx 10rpx; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
|
|||
.checkList-box { |
|||
height: 50rpx; |
|||
width: 60%; |
|||
} |
|||
|
|||
.popup-bottom { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
} |
|||
|
|||
.popup-bottom-left { |
|||
width: 50%; |
|||
line-height: 80rpx; |
|||
} |
|||
|
|||
.popup-bottom-right { |
|||
width: 50%; |
|||
line-height: 100rpx; |
|||
|
|||
.bottom-btn { |
|||
width: 70%; |
|||
line-height: 35px; |
|||
height: 70rpx; |
|||
text-align: center; |
|||
/* margin-top: 10rpx; */ |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
margin: 0 auto; |
|||
background: linear-gradient(90deg, #60F3FF, #088FEB); |
|||
border-radius: 70rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,452 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view> |
|||
<button size="default" type="default" @tap="inputDialogToggle('attrAdd',categoryId)" |
|||
hover-class="is-hover">新增挂单</button> |
|||
</view> |
|||
<view class="order-list"> |
|||
<ul> |
|||
<!-- <li v-for="(item, index) in indexList" :key="index" @tap="clickCollapse"> --> |
|||
<li @tap="clickCollapse"> |
|||
<view class="name">{{item.categoryName}}</view> |
|||
<view class="name">张三的订单</view> |
|||
<view class="bj-btn" @tap.stop="inputDialogToggle('edit', item)">编辑</view> |
|||
<view class="bj-btn" @tap.stop="scanCodeAdd">新增</view> |
|||
<view class="bj-btn" @tap="toggle('center')">语音备注</view> |
|||
<uni-icons type="bottom" size="25"></uni-icons> |
|||
</li> |
|||
</ul> |
|||
</view> |
|||
<view class="order-collapse-item" v-if="isCollapse"> |
|||
<view class="collapse-1"> |
|||
<text>单价</text> |
|||
</view> |
|||
</view> |
|||
<!-- 语音识别弹出层 --> |
|||
<view> |
|||
<uni-popup ref="popup" background-color="#fff" @change="change"> |
|||
<view class="popup-content"> |
|||
<view class="popup-title"> |
|||
<text>语音录入</text> |
|||
<uni-icons @tap='close' type="closeempty" color='red' size="16" |
|||
style="height:40rpx;line-height: 40rpx;position: absolute;right: 0;"></uni-icons> |
|||
</view> |
|||
<view class="popup-container"> |
|||
<textarea name="" id="" style="width:100%;border:1px solid #eee;" v-model="voiceText" |
|||
placeholder="等待语音识别中..."></textarea> |
|||
<view> |
|||
<text style="color:red;font-size:22rpx;">*长按“语音”按钮录入，系统将自动识别</text> |
|||
</view> |
|||
<view class="popup-bottom"> |
|||
<view class="popup-btn" @touchstart="kaishi" @touchend="jieshu">语音</view> |
|||
<view class="popup-btn" @tap="">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
<view class="voice-model" v-if="recordState == true"> |
|||
<img src="/static/images/maikefeng.png" alt=""> |
|||
<view class="voice-text">语音识别中...</view> |
|||
</view> |
|||
<!-- 商品弹出层 --> |
|||
<view> |
|||
<uni-popup ref="shopPopup" background-color="#fff" @change="change"> |
|||
<view class="shop-popup-content"> |
|||
<view class="shop-popup-title"> |
|||
<view class="shop-popup-title-left"> |
|||
<img src="/static/images/logo.png" alt=""> |
|||
</view> |
|||
<view class="shop-popup-title-right"> |
|||
<view class="shop-popup-title-right-box" style="color: #088FEB;">创意小众单肩包</view> |
|||
<view class="shop-popup-title-right-box">QS2023101001</view> |
|||
<view class="shop-popup-title-right-box" style="color: darkorange;" @tap="inputDialogToggle"> |
|||
<text style="margin-right:20rpx;">￥0.00</text> |
|||
<uni-icons color="#088FEB" type="compose" size="16" style="color:#088FEB"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="shop-popup-container"> |
|||
<ul> |
|||
<!-- <li v-for="items in attrList" :key="items.id"> --> |
|||
<li> |
|||
<view class="shop-title-fur"> |
|||
<view class="shop-name">男装</view> |
|||
</view> |
|||
<view class="shop-content-fur"> |
|||
<!-- <view class="content-low" v-for="item in items.attributeValue" :key="item.id" @tap="delItem(item, 'attrNameDel')">男装</view> --> |
|||
<view class="shop-content-low">男装</view> |
|||
</view> |
|||
</li> |
|||
</ul> |
|||
<view class="shop-checkList"> |
|||
<view class="shop-checkList-box"> |
|||
<text>女装</text> |
|||
<text>S码</text> |
|||
<text>黄色</text> |
|||
</view> |
|||
<uni-number-box :value="numberValue" @change="change" /> |
|||
</view> |
|||
</view> |
|||
<view class="shop-popup-bottom"> |
|||
<view class="shop-popup-bottom-left"> |
|||
<text>2 款 9 件</text> |
|||
<text>￥2952.00</text> |
|||
</view> |
|||
<view class="shop-popup-bottom-right"> |
|||
<view class="bottom-btn" @tap="">选好了</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
<!-- 弹出输入框 --> |
|||
<uni-popup ref="inputDialog" type="dialog"> |
|||
<uni-popup-dialog ref="inputClose" mode="input" title="临时改价" placeholder="请输入临时售价" |
|||
@confirm="dialogInputConfirm"></uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var plugin = requirePlugin("WechatSI") |
|||
let manager = plugin.getRecordRecognitionManager() |
|||
export default { |
|||
data() { |
|||
return { |
|||
isCollapse: false, |
|||
voiceText: '', |
|||
recordState: false, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.initRecord() |
|||
}, |
|||
methods: { |
|||
//点击切换折叠状态 |
|||
clickCollapse() { |
|||
this.isCollapse = !this.isCollapse |
|||
}, |
|||
change(e) { |
|||
console.log('当前模式：' + e.type + ',状态：' + e.show); |
|||
}, |
|||
//关闭弹出层 |
|||
close() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
//按住语音识别，开始 |
|||
kaishi() { |
|||
wx.vibrateShort() |
|||
this.recordState = true |
|||
manager.start({ |
|||
duration: 60000, |
|||
lang: "zh_CN" |
|||
}); |
|||
}, |
|||
//松开语音识别，结束 |
|||
jieshu() { |
|||
this.recordState = false |
|||
manager.stop() |
|||
}, |
|||
//语音内容为空 |
|||
showRecordEmptyTip() { |
|||
uni.showToast({ |
|||
title: "请重新说一遍", |
|||
icon: 'error' |
|||
}) |
|||
}, |
|||
//语音识别功能初始化 |
|||
initRecord() { |
|||
//有新的识别内容返回，则会调用此事件 |
|||
manager.onRecognize = (res) => { |
|||
this.voiceText = res.result |
|||
} |
|||
manager.onStart = function(res) { |
|||
this.voiceText = "onStart:" + res.msg + "正在录音" |
|||
} |
|||
// 识别结束事件 |
|||
manager.onStop = (res) => { |
|||
this.voiceText = res.result |
|||
if (res.result == '') { |
|||
this.showRecordEmptyTip() |
|||
return |
|||
} else { |
|||
uni.showModal({ |
|||
content: JSON.stringify(res) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 识别错误事件 |
|||
manager.onError = (res) => { |
|||
this.voiceText = res.msg; |
|||
} |
|||
}, |
|||
//扫一扫功能 |
|||
scanCodeAdd() { |
|||
uni.scanCode({ |
|||
success: (res) => { |
|||
this.toggle('bottom'); |
|||
|
|||
}, |
|||
fail: (res) => { |
|||
uni.showToast({ |
|||
title: '扫描失败', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
//弹出商品规格选择 |
|||
toggle(type) { |
|||
this.type = type |
|||
if(type == 'bottom'){ |
|||
this.$refs.shopPopup.open(type) |
|||
}else{ |
|||
this.$refs.popup.open(type) |
|||
} |
|||
}, |
|||
//临时改价弹窗 |
|||
inputDialogToggle() { |
|||
this.$refs.inputDialog.open() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
button { |
|||
color: #ffffff; |
|||
background: #5fd9ee; |
|||
width: 90%; |
|||
margin-top: 20upx; |
|||
} |
|||
|
|||
.order-list { |
|||
width: 95%; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
height: auto; |
|||
margin: 20upx auto; |
|||
|
|||
} |
|||
|
|||
.order-list ul {} |
|||
|
|||
.order-list li { |
|||
width: 95%; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
font-size: 37rpx; |
|||
border-bottom: 0.5px solid #eee; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.name { |
|||
width: 53%; |
|||
float: left; |
|||
} |
|||
|
|||
.bj-btn { |
|||
width: auto; |
|||
/* height: 60rpx; */ |
|||
font-size: 26rpx; |
|||
background: #fff; |
|||
margin: 0; |
|||
margin-top: 20rpx; |
|||
float: left; |
|||
padding-right: 20rpx; |
|||
line-height: 60rpx; |
|||
color: blue; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.order-collapse-item { |
|||
display: flex; |
|||
text-align: center; |
|||
background: #eee; |
|||
height: 110rpx; |
|||
} |
|||
|
|||
.popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px; |
|||
width: 500rpx; |
|||
height: 600rpx; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.popup-title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.popup-container { |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.popup-bottom { |
|||
display: flex; |
|||
height: 80rpx; |
|||
color: #fff; |
|||
line-height: 80rpx; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.popup-btn { |
|||
flex: 1; |
|||
text-align: center; |
|||
background: linear-gradient(90deg, #FF9797, #FFC1E0); |
|||
} |
|||
|
|||
.popup-btn:last-child { |
|||
background: linear-gradient(90deg, #60F3FF, #088FEB); |
|||
} |
|||
|
|||
.voice-model { |
|||
width: 300rpx; |
|||
height: 300rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-flow: column; |
|||
position: fixed; |
|||
left: 50%; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 20rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
margin-left: -150rpx; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.voice-model img { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
|
|||
.shop-popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px; |
|||
height: 1200rpx; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.shop-popup-title-right-box { |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
|
|||
.shop-popup-title-right { |
|||
width: 400rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
|
|||
.shop-popup-title-left { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.shop-popup-title-left image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
|
|||
} |
|||
|
|||
.shop-popup-title { |
|||
display: flex; |
|||
height: 180rpx; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
.shop-popup-container { |
|||
width: 95%; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
height: auto; |
|||
margin: 20upx auto; |
|||
} |
|||
.shop-title-fur { |
|||
width: 95%; |
|||
height: 70rpx; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.shop-name { |
|||
font-size: 30rpx; |
|||
width: 50%; |
|||
float: left; |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
} |
|||
|
|||
.shop-content-fur { |
|||
padding-bottom: 25rpx; |
|||
} |
|||
|
|||
.shop-content-low { |
|||
width: auto; |
|||
border: 1px solid #eee; |
|||
display: inline-block; |
|||
min-width: 90rpx; |
|||
padding: 5rpx; |
|||
font-size: 35rpx; |
|||
text-align: center; |
|||
color: #777; |
|||
margin: 20rpx 0 0 20rpx; |
|||
} |
|||
|
|||
.shop-content-low:hover { |
|||
background: #eee; |
|||
} |
|||
|
|||
.shop-checkList { |
|||
display: flex; |
|||
height: 50rpx; |
|||
font-size: 28rpx; |
|||
line-height: 50rpx; |
|||
padding: 20rpx 10rpx; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
|
|||
.shop-checkList-box { |
|||
height: 50rpx; |
|||
width: 60%; |
|||
} |
|||
|
|||
.shop-popup-bottom { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
} |
|||
|
|||
.shop-popup-bottom-left { |
|||
width: 50%; |
|||
line-height: 80rpx; |
|||
} |
|||
|
|||
.shop-popup-bottom-right { |
|||
width: 50%; |
|||
line-height: 100rpx; |
|||
|
|||
.bottom-btn { |
|||
width: 70%; |
|||
line-height: 35px; |
|||
height: 70rpx; |
|||
text-align: center; |
|||
/* margin-top: 10rpx; */ |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
margin: 0 auto; |
|||
background: linear-gradient(90deg, #60F3FF, #088FEB); |
|||
border-radius: 70rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,158 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class=""> |
|||
<view class="" v-if="popleType1== 'kh'" @tap=""> |
|||
<!-- 供应商、客户走这一套 --> |
|||
<view> |
|||
<button size="default" type="default" @tap="" hover-class="is-hover">新增人员</button> |
|||
</view> |
|||
<view class="list-1" v-for="item in popleList" :key="item"> |
|||
<view class="name-tel"> |
|||
<text>{{item.name}}</text> |
|||
<text style="display: inline-block;margin-left:20rpx;">{{item.phone}}</text> |
|||
</view> |
|||
<view class="name-tel"> |
|||
<text>{{item.province + item.city + item.area + item.address}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 物流公司、快递公司、啦包公走这一套 --> |
|||
<view class="" v-else> |
|||
<view class="list-1" style="display: flex;height:75rpx;" v-for="item in popleList" :key="item"> |
|||
<view class="name-tel"> |
|||
<text>{{item.companyName}}</text> |
|||
<text style="display: inline-block;margin-left:20rpx;">{{item.mobile}}</text> |
|||
</view> |
|||
<view class="standard-box" @tap="toggle('center')">收费标准<uni-icons type="info" color='#088FEB' |
|||
size="16" style="line-height: 75rpx;"></uni-icons></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view> |
|||
<uni-popup ref="popup" background-color="#fff" @change="change"> |
|||
<view class="popup-content"> |
|||
<view class="popup-title"> |
|||
<text>收费标准</text> |
|||
<uni-icons @tap='close' type="closeempty" color='red' size="16" |
|||
style="height:40rpx;line-height: 40rpx;position: absolute;right: 0;"></uni-icons> |
|||
</view> |
|||
<view class="popup-container"> |
|||
<text |
|||
style="display: inline-block;text-indent: 2em;">标准快递1公斤以下11元，超过1公斤的1到30公斤内是三块钱每公斤。精准汽运，如果是重货的话1.65元每公斤，轻货是347元每立方米。精准卡航，轻货是441元每立方米，重货是2.1元每公斤，运输起价是40元，接货起价是60元。还有一种是3.60特惠件，3公斤以下的按照15元收费，超过3公斤到30公斤以内的按每公斤三元收费。</text> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
popleType1: '', |
|||
popleList: [] |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
console.log(options.popleType) |
|||
this.popleType1 = options.popleType |
|||
if(options.popleType == ('kh' || 'gys')){ //供应商或者客户 |
|||
this.khOrGysList(options.popleType); |
|||
}else{ // |
|||
this.wlOrKdList(options.popleType) |
|||
} |
|||
}, |
|||
methods: { |
|||
//客户、供应商列表 |
|||
khOrGysList() { |
|||
this.tui.request("/app/customer/list", "get", { |
|||
|
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.popleList = res.result; |
|||
} |
|||
}) |
|||
}, |
|||
//物流或者快递列表 |
|||
wlOrKdList(e) { |
|||
//物流：1 快递：2 |
|||
if (e == 'wl') { |
|||
this.signCompany = 1; |
|||
} else { |
|||
this.signCompany = 2 |
|||
} |
|||
this.tui.request("/app/logitics/getAll", "post", { |
|||
signCompany: this.signCompany |
|||
}, false, false).then((res) => { |
|||
if (res.code == 200) { |
|||
this.popleList = res.result; |
|||
} |
|||
}) |
|||
}, |
|||
//打开弹出层 |
|||
toggle(type) { |
|||
this.type = type |
|||
this.$refs.popup.open(type) |
|||
}, |
|||
change(e) { |
|||
console.log('当前模式：' + e.type + ',状态：' + e.show); |
|||
}, |
|||
//关闭弹出层 |
|||
close() { |
|||
this.$refs.popup.close() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
button { |
|||
color: #ffffff; |
|||
background: #5fd9ee; |
|||
width: 90%; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.list-1 { |
|||
height: 150rpx; |
|||
border-bottom: 1px solid #eee; |
|||
background: #fff; |
|||
font-size: 32rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.name-tel { |
|||
height: 75rpx; |
|||
line-height: 75rpx; |
|||
padding-left: 40rpx; |
|||
} |
|||
|
|||
.standard-box { |
|||
color: #088FEB; |
|||
line-height: 75rpx; |
|||
width: 50%; |
|||
text-align: right; |
|||
} |
|||
|
|||
|
|||
.popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px; |
|||
width: 500rpx; |
|||
height: 700rpx; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.popup-title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.popup-container { |
|||
margin-top: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<view> |
|||
<view class="formBox"> |
|||
<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="85px"> |
|||
<uni-forms-item label="店铺名称" name="shopName" required> |
|||
<uni-easyinput type="text" v-model="formData.shopName" placeholder="请输入店铺名称" trim="all" /> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="店铺地址" required name="shopAddress"> |
|||
<uni-easyinput type="text" v-model="formData.shopAddress" placeholder="请输入店铺地址(精确到门牌号)" |
|||
trim="all" /> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="手机号" name="mobile" required> |
|||
<uni-easyinput type="digit" v-model="formData.mobile" placeholder="请输入手机号" trim="all" /> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="验证码" name="code" required> |
|||
<uni-easyinput type="digit" v-model="formData.code" placeholder="请输入验证码" trim="all" /> |
|||
<button class="button" size="mini" type="default" @click="sendLoginSms" :disabled="choose" :class="choose == false ? 'hasChosen':'notChosen'"> |
|||
{{ choose ? clock + '重新获取' : '获取验证码' }} |
|||
</button> |
|||
</uni-forms-item> |
|||
</uni-forms> |
|||
<u-button type="primary" @tap.stop="submit()">提交注册</u-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { reg } from '@/utils/global.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
// 表单数据 |
|||
formData: { |
|||
shopName: '', |
|||
shopAddress: '', |
|||
mobile: '', |
|||
code: '', |
|||
LoginSms:'' |
|||
}, |
|||
rules: { |
|||
// 对name字段进行必填验证 |
|||
shopName: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请输入店铺名称', |
|||
}, ], |
|||
}, |
|||
shopAddress: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请输入店铺地址', |
|||
}, ], |
|||
}, |
|||
mobile: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请输入手机号', |
|||
}, ], |
|||
}, |
|||
code: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请填写验证码', |
|||
}, ], |
|||
}, |
|||
}, |
|||
choose:false, |
|||
isChoose:false, |
|||
clock: 60 ,// 倒计时 |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
sendLoginSms(){ // 获取验证码 |
|||
this.isChoose = false |
|||
if(reg(this.formData.mobile,this.clock) && this.isChoose == false){ |
|||
this.choose = true |
|||
this.setTime() |
|||
this.tui.request("/common/captcha/sendRegistSms/"+this.formData.mobile, "GET", { |
|||
|
|||
}).then((res) => { |
|||
if (res.code == 200) { |
|||
uni.showToast({ |
|||
title: "发送成功", |
|||
icon: 'success' |
|||
}) |
|||
} |
|||
}).catch((res) => {}) |
|||
}else if(reg(this.formData.mobile,this.clock) && this.isChoose == true){ |
|||
console.log('通过了') |
|||
} |
|||
}, |
|||
setTime(){// 倒计时函数 |
|||
if(this.clock == 0){ |
|||
this.clock = 60 |
|||
this.choose = false |
|||
return |
|||
}else{ |
|||
this.clock-- |
|||
if(this.clock < 10){this.clock = '0'+this.clock} |
|||
} |
|||
setTimeout(() => { this.setTime() },1000) |
|||
}, |
|||
// 触发提交表单 |
|||
submit() { |
|||
this.$refs.form.validate().then(res => { |
|||
this.tui.request("/auth/register", "post", res, false, true).then((res1) => { |
|||
if (res1.code == 200) { |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: "添加失败", |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}) |
|||
}).catch(err => { |
|||
console.log('表单错误信息：', err); |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.formBox { |
|||
margin: 20rpx; |
|||
padding: 20rpx 26rpx; |
|||
border-radius: 14rpx; |
|||
box-shadow: 0px 1px 10px 2px #e2e2e2; |
|||
background-color: #fff; |
|||
|
|||
.uni-data-select { |
|||
width: 100%; |
|||
} |
|||
} |
|||
.hasChosen{ |
|||
height: 74rpx; |
|||
line-height: 74rpx; |
|||
color: #fff; |
|||
border: none; |
|||
background: #5fd9ee; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue