积分商城
This commit is contained in:
49
api/packageIntegral/productList.js
Normal file
49
api/packageIntegral/productList.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default{
|
||||
productByPage(data) { // 商品分页查询
|
||||
return request({
|
||||
url: `/oil-mall/mobile/productByPage`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
},
|
||||
getTopInfo() { // 获取头部信息
|
||||
return request({
|
||||
url: `/oil-mall/mobile/getTopInfo`,
|
||||
method: 'get',
|
||||
})
|
||||
},
|
||||
productStatus(data) { // 上下架接口
|
||||
return request({
|
||||
url: `/oil-mall/mobile/productStatus`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
},
|
||||
productAuditHistory(data) { // 审核信息接口
|
||||
return request({
|
||||
url: `/oil-mall/mobile/productAuditHistory`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
},
|
||||
classification() { // 商品分类-树形接口
|
||||
return request({
|
||||
url: `/oil-mall/mobile/classification`,
|
||||
method: 'get',
|
||||
})
|
||||
},
|
||||
getProductBrands() { // 品牌信息接口
|
||||
return request({
|
||||
url: `/oil-mall/mobile/getProductBrands`,
|
||||
method: 'get',
|
||||
})
|
||||
},
|
||||
getAttributesType() { // 属性类型接口
|
||||
return request({
|
||||
url: `/oil-mall/mobile/getAttributesType`,
|
||||
method: 'get',
|
||||
})
|
||||
},
|
||||
}
|
||||
@@ -19,7 +19,7 @@
|
||||
pidkey: { default: 'pid' }, // 对应父id取值
|
||||
placeholder: { default: '请选择' },
|
||||
emitPath: { default: false, type: Boolean }, // 是否子父级关联 ,是的时候返回的是逗号分隔的父子code
|
||||
level: { default: 3, type: Number } // 列数 2或者3
|
||||
level: { default: 2, type: Number } // 列数 2或者3
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -30,7 +30,6 @@
|
||||
},
|
||||
methods: {
|
||||
handleColumnChange(e) {
|
||||
|
||||
let columnindex = e.detail.value; // 拖动列索引
|
||||
switch (e.detail.column) {
|
||||
case 0: //拖动第1列
|
||||
@@ -75,7 +74,6 @@
|
||||
}
|
||||
let code = codeArr.join(',');
|
||||
this.name = nameArr.join('/');
|
||||
console.log('code1',code);
|
||||
this.$emit('input', code)
|
||||
}else {
|
||||
|
||||
@@ -89,7 +87,6 @@
|
||||
this.name = curArr[multiIndex[1]][this.rangekey];
|
||||
}
|
||||
|
||||
console.log('code2',code);
|
||||
this.$emit('input', code)
|
||||
}
|
||||
},
|
||||
@@ -151,15 +148,16 @@
|
||||
list: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
if(JSON.stringify(val) != '[]'){
|
||||
this.dataInit();
|
||||
this.initName();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
value: {
|
||||
// immediate: true,
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
this.initName();
|
||||
}
|
||||
},
|
||||
|
||||
@@ -5,39 +5,44 @@
|
||||
<block slot="content">新增商品</block>
|
||||
</cu-custom>
|
||||
<view id="chooseType" :class="currentBoxId == 'chooseType' ? 'show' : 'hidden'">
|
||||
<uni-forms ref="productForm" :modelValue="productDate" label-width="200rpx">
|
||||
<uni-forms ref="productForm" :modelValue="productDate" :rules="rules" label-width="200rpx">
|
||||
<uni-forms-item label="商品分类:" name="name">
|
||||
<mulpicker
|
||||
v-model="productDate.demandRegion"
|
||||
:list="productList"
|
||||
rangekey="name"
|
||||
rangekey="categoryName"
|
||||
code="id"
|
||||
pidkey="pid"
|
||||
childkey="city"
|
||||
pidkey="id"
|
||||
childkey="classificationTwoList"
|
||||
:emitPath="true"
|
||||
:level="2"
|
||||
:placeholder="'选择商品分类'"
|
||||
/>
|
||||
<uni-icons color="#666666" type="right" size="22" style="position: absolute;right: 0;top: 10rpx;"></uni-icons>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品名称:" name="age">
|
||||
<input type="text" v-model="productDate.age" placeholder="请输入" />
|
||||
<uni-forms-item label="商品名称:" name="productName">
|
||||
<input type="text" v-model="productDate.productName" placeholder="请输入商品名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="关键词:" name="age">
|
||||
<input type="text" v-model="productDate.age" placeholder="请输入" />
|
||||
<uni-forms-item label="关键词:" name="keyword">
|
||||
<input type="text" v-model="productDate.keyword" placeholder="请输入关键词(空格分隔)" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品品牌:" name="age">
|
||||
<input type="text" v-model="productDate.age" placeholder="请输入" />
|
||||
<uni-forms-item label="商品品牌:" name="brandId">
|
||||
<!-- <input type="text" v-model="productDate.brandId" placeholder="请输入商品品牌" /> -->
|
||||
<uni-data-select
|
||||
v-model="productDate.brandId"
|
||||
:localdata="brandIdList"
|
||||
placeholder="请选择商品品牌"
|
||||
></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品售价:" name="age">
|
||||
<input type="text" v-model="productDate.age" placeholder="请输入" />
|
||||
<uni-forms-item label="商品售价:" name="price">
|
||||
<input type="text" v-model="productDate.price" placeholder="请输入商品售价" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品上架:" name="age">
|
||||
<switch color="#FE0606" checked style="transform:scale(0.7)" />
|
||||
<uni-forms-item label="商品上架:" name="productStatus">
|
||||
<switch v-model="productDate.productStatus" color="#FE0606" checked style="transform:scale(0.7)" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品推荐:" name="age">
|
||||
<view class='checkbox-con'>
|
||||
<radio-group @change="checkboxChange">
|
||||
<radio-group>
|
||||
<label :class="item.checked?'checkbox checked':'checkbox'" @click="checkbox(index)" v-for="(item, index) in radioItem" :key="item.value">
|
||||
<checkbox :value="item.value" :checked="item.checked"/>{{item.name}}
|
||||
</label>
|
||||
@@ -53,7 +58,75 @@
|
||||
|
||||
|
||||
<view id="instruction" :class="currentBoxId == 'instruction' ? 'show' : 'hidden'">
|
||||
<productAddStep2 />
|
||||
<!-- <productAddStep2 /> -->
|
||||
<uni-forms :modelValue="productDate" label-width="200rpx">
|
||||
<uni-forms-item label="属性类别:" >
|
||||
<uni-data-select
|
||||
v-model="productDate.attributesTypeId"
|
||||
:localdata="attributesTypeList"
|
||||
placeholder="请选择商品品牌"
|
||||
@change="attributesData"
|
||||
></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<view class="content" v-show="productDate.attributesTypeId">
|
||||
<view>商品类型:</view>
|
||||
<view>
|
||||
<uni-section type="line">
|
||||
<view class="uni-px-5" v-for="(item,index) in attributesList">
|
||||
<view style="display: inline-block;">{{item.attributeName}}:</view>
|
||||
<view style="display: inline-block;">
|
||||
<uni-data-checkbox v-if="index==0" mode="tag" v-model="radioAttributes" :localdata="item.attributesList"></uni-data-checkbox>
|
||||
<uni-data-checkbox v-else-if="index!=0" mode="tag" multiple v-model="checkboxAttributes" :localdata="hobby"></uni-data-checkbox>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>批量填充:<text style="color: #999999;">批量填充填入信息后,可以批量将内容填写到SKU 信息里</text></view>
|
||||
<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
|
||||
<view class="redButton">确定</view>
|
||||
</view>
|
||||
<view v-if="productDate.attributesTypeId&&checkboxAttributes.length>0" v-for="(items,index) in checkboxAttributes">
|
||||
<view>
|
||||
<text style="color: red;">*</text>
|
||||
<text>规格:</text>
|
||||
<text>{{radioAttributes}}+{{items}}</text>
|
||||
</view>
|
||||
<view class="tagButton" v-for="items in bottonList">{{item.label}}</view>
|
||||
<view style="display: inline-block;" @click="deleteCheckAll(index)">删除</view>
|
||||
</view>
|
||||
<view v-if="productDate.attributesTypeId&&radioAttributes" >
|
||||
<view>
|
||||
<text style="color: red;">*</text>
|
||||
<text>规格:</text>
|
||||
<text>{{radioAttributes}}</text>
|
||||
</view>
|
||||
<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
|
||||
<view style="display: inline-block;" @click="deleteRadio">删除</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<text style="color: red;">*</text>
|
||||
商品图片:<text style="color: #999999;">最多可上传10张图片</text></view>
|
||||
<view>
|
||||
<view class="imageBlack">商品主图</view>
|
||||
<view class="imageBlack">设为主图</view>
|
||||
<view class="imageBlack" @tap="srcFileImage">
|
||||
<view style="cameraImage">
|
||||
<uni-icons type="camera-filled" size="30"></uni-icons>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view>
|
||||
<view>详情图片:<text style="color: #999999;">最多可上传10张图片</text></view>
|
||||
<view></view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<view class="buttons">
|
||||
<view id="previous" @click="changeBox">上一步</view>
|
||||
<view @click="addCompleted">完成</view>
|
||||
@@ -67,7 +140,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import serve from '@/api/packageIntegral/orderList.js'
|
||||
import utils from '@/utils/encode'
|
||||
import serve from '@/api/packageIntegral/productList.js'
|
||||
import mulpicker from '@/packageIntegral/components/mulpicker.vue'
|
||||
import productAddStep2 from '@/packageIntegral/productAddition/productAddStep2.vue'
|
||||
export default {
|
||||
@@ -80,60 +154,88 @@
|
||||
currentBoxId: 'instruction', //当前显示的view的id
|
||||
isBoxShow: false,
|
||||
productDate:{},
|
||||
productList:[{
|
||||
"name": "北京市",
|
||||
'id':'0',
|
||||
"city": [{
|
||||
'name':"东城区",
|
||||
'id':'1',
|
||||
},{
|
||||
'name':"西城区",
|
||||
'id':'2',
|
||||
},{
|
||||
'name':"崇文区",
|
||||
'id':'3',
|
||||
},{
|
||||
'name':"宣武区",
|
||||
'id':'4',
|
||||
},{
|
||||
'name':"朝阳区",
|
||||
'id':'5',
|
||||
}
|
||||
]
|
||||
}],
|
||||
productList:[],
|
||||
brandIdList:[],
|
||||
radioItem:[{
|
||||
name: '新品',
|
||||
checked: true
|
||||
}, {
|
||||
name: '推荐',
|
||||
checked: false
|
||||
}]
|
||||
}],
|
||||
rules:{
|
||||
name:{rules:[{required: true,errorMessage: '请选择商品分类'}]},
|
||||
productName:{rules:[{required: true,errorMessage: '请输入商品名称'}]},
|
||||
brandId:{rules:[{required: true,errorMessage: '请输入商品品牌'}]},
|
||||
price:{rules:[{required: true,errorMessage: '请输入商品售价'}]},
|
||||
},
|
||||
attributesTypeList:[],
|
||||
attributesList:[],
|
||||
bottonList:[
|
||||
{label:'市场价格',value:'marketPrice'},
|
||||
{label:'销售价格',value:'sellPrice'},
|
||||
{label:'商品库存',value:'stock'},
|
||||
{label:'兑换积分',value:'integral'}
|
||||
],
|
||||
radioAttributes:'',
|
||||
checkboxAttributes:[]
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
// this.get(options.orderId)
|
||||
this.classfication()
|
||||
this.getProductBrands()
|
||||
this.getAttributesType()
|
||||
},
|
||||
watch:{
|
||||
'productDate.demandRegion'(val){
|
||||
if(val){
|
||||
this.productDate.categoryOneId = val.split(',')[0]
|
||||
this.productDate.categoryTwoId = val.split(',')[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
classfication(){
|
||||
serve.classification().then(res=>{
|
||||
this.productList = res.data
|
||||
})
|
||||
},
|
||||
getProductBrands(){
|
||||
this.brandIdList = []
|
||||
serve.getProductBrands().then(res=>{
|
||||
console.log(res)
|
||||
res.data.forEach(tab=>{
|
||||
this.brandIdList.push({value:tab.id,text:tab.brandName})
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
checkbox (e) {
|
||||
console.log(e)
|
||||
var index = e;//获取当前点击的下标
|
||||
var checkboxArr = this.radioItem;//选项集合
|
||||
if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回
|
||||
checkboxArr.forEach(item => {
|
||||
item.checked = false
|
||||
})
|
||||
// if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回
|
||||
// checkboxArr.forEach(item => {
|
||||
// item.checked = false
|
||||
// })
|
||||
if(checkboxArr[index].checked ==false){
|
||||
checkboxArr[index].checked = true; //改变当前选中的checked值
|
||||
// this.setData({
|
||||
// checkboxArr: checkboxArr
|
||||
// });
|
||||
|
||||
},
|
||||
checkboxChange (e) {
|
||||
var checkValue = e.detail.value;
|
||||
// this.setData({
|
||||
// checkValue: checkValue
|
||||
// });
|
||||
}else {
|
||||
checkboxArr[index].checked = false; //改变当前选中的checked值
|
||||
}
|
||||
if(checkboxArr[0].checked ==true){
|
||||
this.productDate.newMark = 1
|
||||
}else{
|
||||
this.productDate.newMark = 2
|
||||
}
|
||||
if(checkboxArr[1].checked ==true){
|
||||
this.productDate.recommend = 1
|
||||
}else{
|
||||
this.productDate.recommend = 2
|
||||
}
|
||||
|
||||
},
|
||||
changeBox(e){
|
||||
let currentFlag = e.currentTarget.id;
|
||||
@@ -148,6 +250,153 @@
|
||||
this.currentBoxId = 'viewInstruction'
|
||||
break;
|
||||
}
|
||||
if(currentFlag == 'next'){
|
||||
this.getAttributesType()
|
||||
}
|
||||
},
|
||||
getAttributesType(){
|
||||
this.attributesTypeList = []
|
||||
serve.getAttributesType().then(res=>{
|
||||
res.data.forEach(tab=>{
|
||||
this.attributesTypeList.push({
|
||||
value:tab.id,
|
||||
text:tab.name,
|
||||
number:tab.number,
|
||||
attributesList:tab.attributesList
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
attributesData(){
|
||||
if(this.productDate.attributesTypeId){
|
||||
this.attributesTypeList.forEach(tab=>{
|
||||
if(tab.id = this.productDate.attributesTypeId){
|
||||
this.attributesList = tab.attributesList
|
||||
this.attributesList.forEach(tab=>{
|
||||
tab.attributesList = []
|
||||
tab.attributeContent.split(',').forEach(item=>{
|
||||
tab.attributesList.push({value:item,text:item})
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.attributesList = []
|
||||
}
|
||||
|
||||
},
|
||||
deleteCheckAll(i){
|
||||
if(this.checkboxAttributes.length>1){
|
||||
this.checkboxAttributes.splice(i,1)
|
||||
}else{
|
||||
this.checkboxAttributes.splice(i,1)
|
||||
this.radioAttributes = ''
|
||||
}
|
||||
},
|
||||
deleteRadio(){
|
||||
this.radioAttributes = ''
|
||||
},
|
||||
// 调用系统相机
|
||||
takePhoto() {
|
||||
// 先检查权限
|
||||
let _that = this
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
if (!res.authSetting['scope.camera']) {
|
||||
// 请求权限
|
||||
uni.authorize({
|
||||
scope: 'scope.camera',
|
||||
success() {
|
||||
// 权限已经获取,可以调用相机
|
||||
_that.srcFileImage()
|
||||
},
|
||||
fail() {
|
||||
// 用户拒绝授权,需引导用户开启权限
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要相机权限才能使用相机功能,请在设置中打开',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
// 引导用户去设置中打开权限
|
||||
wx.openSetting({
|
||||
success(res) {
|
||||
if (res.authSetting['scope.camera']) {
|
||||
re()
|
||||
// 授权成功,重新定位
|
||||
} else {
|
||||
// 没有允许定位权限
|
||||
wx.showToast({
|
||||
title: '您拒绝了相机权限,将无法使用相机功能',
|
||||
icon: 'none'
|
||||
});
|
||||
rj('拒绝了相机权限')
|
||||
}
|
||||
},
|
||||
fail() {
|
||||
rj('openSetting调用失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
// 权限已经获取,可以直接调用相机
|
||||
_that.srcFileImage()
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
// 获取设置失败
|
||||
console.error(err);
|
||||
},
|
||||
});
|
||||
},
|
||||
//调起上传图片
|
||||
srcFileImage() {
|
||||
let _that = this
|
||||
uni.chooseImage({
|
||||
count: 10, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function(res) {
|
||||
console.log(res)
|
||||
console.log('进入1')
|
||||
const JSESSIONID = utils.uuid()
|
||||
uni.uploadFile({
|
||||
url: 'http://uat.xingoil.com/adminapi/oil-oss/obejct/uploadFile',
|
||||
filePath: res.tempFilePaths[0],
|
||||
formData: {
|
||||
ossKey: 'xingyou',
|
||||
pathKey: 'publicxingyou',
|
||||
encrypt: 'PUBLIC',
|
||||
},
|
||||
name: 'file',
|
||||
header: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
"Authorization": uni.getStorageSync('Authorization'),
|
||||
'dataSources': 'MP',
|
||||
"imei": uni.getStorageSync('unionid'),
|
||||
"openId": uni.getStorageSync('openid'),
|
||||
'JSESSIONID': JSESSIONID,
|
||||
'token': utils.md5Salt(JSESSIONID)
|
||||
},
|
||||
success(e) {
|
||||
console.log('进入2')
|
||||
console.log(e)
|
||||
let obj = JSON.parse(e.data),
|
||||
url = obj.data.publicUrl
|
||||
console.log(obj.data.publicUrl)
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},fail() {
|
||||
console.log('相机调用失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
picker2(e){
|
||||
console.log(e.detail.value)
|
||||
@@ -181,6 +430,12 @@
|
||||
/deep/ .uni-forms{
|
||||
width: 100%;
|
||||
}
|
||||
.content{
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/deep/ .uni-forms-item{
|
||||
width: 100%;
|
||||
}
|
||||
@@ -208,6 +463,68 @@
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
#instruction{
|
||||
padding: 30rpx;
|
||||
|
||||
mulpicker{
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
/deep/ .uni-forms{
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .uni-forms-item{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .uni-forms-item__label{
|
||||
color: #333 !important;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
/deep/ .uni-forms-item__content{
|
||||
width: 100%;
|
||||
input{
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
}
|
||||
.tagButton{
|
||||
display: inline-block;
|
||||
width: 133rpx;
|
||||
height: 58rpx;
|
||||
background: #f5f5f5;
|
||||
color: #666666;
|
||||
border-radius: 8rpx;
|
||||
line-height: 58rpx;
|
||||
text-align: center;
|
||||
margin: 8rpx;
|
||||
}
|
||||
.redButton{
|
||||
display: inline-block;
|
||||
width: 84rpx;
|
||||
height: 58rpx;
|
||||
background: red;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
line-height: 58rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.imageBlack{
|
||||
display: inline-block;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
line-height: 140rpx;
|
||||
// position: relative;
|
||||
.cameraImage{
|
||||
// position: absolute;
|
||||
// left: 70rpx;
|
||||
// top: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.checkbox-con{
|
||||
margin-top: 40rpx;
|
||||
text-align: center;
|
||||
|
||||
@@ -3,14 +3,50 @@
|
||||
|
||||
<view class="body">
|
||||
<view class="bodyContent">
|
||||
<view class="bodyLabel">属性类型:</view>
|
||||
<view class="bodyItem">
|
||||
<uni-data-select
|
||||
v-model="value"
|
||||
:localdata="range"
|
||||
@change="change"
|
||||
></uni-data-select>
|
||||
<uni-collapse ref="collapse">
|
||||
<uni-collapse-item title="属性类型:" style="width: 700rpx;">
|
||||
<view class="content">
|
||||
<view>商品类型:</view>
|
||||
<view>
|
||||
<uni-section type="line">
|
||||
<view class="uni-px-5">
|
||||
<view style="display: inline-block;">尺码:</view>
|
||||
<uni-data-checkbox mode="tag" v-model="radio" :localdata="range"></uni-data-checkbox>
|
||||
</view>
|
||||
<view class="uni-px-5 uni-pb-5">
|
||||
<view style="display: inline-block;">颜色:</view>
|
||||
<uni-data-checkbox mode="tag" multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
<view>
|
||||
<view>批量填充:<text style="color: #999999;">批量填充填入信息后,可以批量将内容填写到SKU 信息里</text></view>
|
||||
<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
|
||||
<view class="redButton">确定</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<text style="color: red;">*</text>
|
||||
<text>规格</text>
|
||||
<text>M+红色</text>
|
||||
</view>
|
||||
<view class="tagButton" v-for="item in bottonList">{{item.label}}</view>
|
||||
<view style="display: inline-block;">删除</view>
|
||||
</view>
|
||||
<view>
|
||||
<text style="color: red;">*</text>
|
||||
<text>商品图片</text>
|
||||
<text>最多可上传10张图片</text>
|
||||
<view></view>
|
||||
</view>
|
||||
<view>
|
||||
<text>详情图片</text>
|
||||
<text>最多可上传10张图片</text>
|
||||
<view></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -21,18 +57,46 @@
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
value: 1,
|
||||
radio: 0,
|
||||
range: [
|
||||
{ value: 0, text: "篮球" },
|
||||
{ value: 1, text: "足球" },
|
||||
{ value: 2, text: "游泳" },
|
||||
{
|
||||
text: 'M',
|
||||
value: 0
|
||||
}, {
|
||||
text: 'X',
|
||||
value: 1
|
||||
}, {
|
||||
text: 'XL',
|
||||
value: 2
|
||||
}, {
|
||||
text: '2XL',
|
||||
value: 3
|
||||
},
|
||||
],
|
||||
checkbox:[0],
|
||||
hobby: [{
|
||||
text: '黑色',
|
||||
value: 0
|
||||
}, {
|
||||
text: '红色',
|
||||
value: 1
|
||||
}, {
|
||||
text: '白色',
|
||||
value: 2
|
||||
}, {
|
||||
text: '蓝色',
|
||||
value: 3
|
||||
}],
|
||||
bottonList:[
|
||||
{label:'市场价格'},
|
||||
{label:'销售价格'},
|
||||
{label:'商品库存'},
|
||||
{label:'兑换积分'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -41,15 +105,33 @@
|
||||
.container{
|
||||
.body{
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.bodyContent{
|
||||
position: relative;
|
||||
// padding-left:150rpx;
|
||||
.bodyLabel{
|
||||
display: inline-block;
|
||||
width: 150rpx;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.tagButton{
|
||||
display: inline-block;
|
||||
width: 133rpx;
|
||||
height: 58rpx;
|
||||
background: #f5f5f5;
|
||||
color: #666666;
|
||||
border-radius: 10rpx;
|
||||
line-height: 58rpx;
|
||||
text-align: center;
|
||||
margin: 10rpx;
|
||||
}
|
||||
.redButton{
|
||||
display: inline-block;
|
||||
width: 84rpx;
|
||||
height: 58rpx;
|
||||
background: red;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
line-height: 58rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -9,29 +9,31 @@
|
||||
<view v-for="item,index in optionsList" :key="index" :class="index == currentIndex ? 'active':''"
|
||||
@click="selectOptions(index)">{{item.text}}<text>({{item.count}})</text></view>
|
||||
</view>
|
||||
|
||||
<view class="search">
|
||||
<uni-easyinput prefixIcon="search" v-model="paramter.customerphone" placeholder="请输入手机号后四位"
|
||||
@confirm="search" maxlength="4" />
|
||||
<uni-easyinput prefixIcon="search" borderColor="#DCDFE6" v-model="paramter.params.productName" placeholder="请输入商品名称"
|
||||
@confirm="search" @clear="search" />
|
||||
</view>
|
||||
|
||||
|
||||
<scroll-view v-if="dataList.length" class="list" :scroll-y="true" @scrolltolower="lower">
|
||||
<view class="item" v-for="item,index in dataList" :key="index">
|
||||
<view class="header" @click="toDetails(item)">
|
||||
<view class="identifying" :style="{background:identifying[1].background,opacity:identifying[1].opacity}">已上架</view>
|
||||
<view class="identifying"
|
||||
:style="{background:identifying[item.productStatus].background,
|
||||
opacity:identifying[item.productStatus].opacity}">{{item.productStatus =='1'?'已上架':'未上架'}}</view>
|
||||
</view>
|
||||
<view class="introduce" @click="toDetails(item)">
|
||||
<image :src="item.oderDetailImg"></image>
|
||||
<image :src="item.url"></image>
|
||||
<view>{{item.productName}}</view>
|
||||
<view>规格:默认</view>
|
||||
<view>¥{{item.marketPrice}} X{{item.orderNum}}</view>
|
||||
<view>库存:{{item.orderNum}}</view>
|
||||
<view>库存:{{item.totalStock}}</view>
|
||||
</view>
|
||||
<view class="examine" @click="examineDetail" :style="{background:statusEnum[1].color}" >{{statusEnum[1].value}}</view>
|
||||
<view class="examine" @click="examineDetail(item)"
|
||||
:style="{background:statusEnum[item.auditStatus].color}" >{{statusEnum[item.auditStatus].value}}</view>
|
||||
<view class="footer">
|
||||
<view class="button" @click="orderDelete">删除</view>
|
||||
<view class="button">编辑</view>
|
||||
<view class="button" @click="upDownFrame">上架</view>
|
||||
<view class="button" @click="upDownFrame(item)">{{item.productStatus =='1'?'上架':'下架'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 30rpx; background: #fff;"></view>
|
||||
@@ -50,13 +52,13 @@
|
||||
<view class="header">审核时间</view>
|
||||
<view>{{item.createTime}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="status">
|
||||
<view class="header">审核结果</view>
|
||||
<view>{{item.status}}</view>
|
||||
<view>{{statusEnum[item.auditStatus].value}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="header">反馈详情</view>
|
||||
<view>{{item.dateil}}</view>
|
||||
<view>{{item.remark}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buttons">
|
||||
@@ -77,10 +79,10 @@
|
||||
|
||||
<uni-popup ref="popup">
|
||||
<view class="determine-frame">
|
||||
<view class="title">是否上架/下架该商品?</view>
|
||||
<view class="title">是否{{productData.productStatus =='1'?'下架':'上架'}}该商品?</view>
|
||||
<view class="buttons">
|
||||
<view @click="$refs.popup.close()">取消</view>
|
||||
<view>确认</view>
|
||||
<view @click="submitProduct">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
@@ -89,7 +91,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import serve from '@/api/packageIntegral/orderList.js'
|
||||
import serve from '@/api/packageIntegral/productList.js'
|
||||
|
||||
export default {
|
||||
options: {
|
||||
@@ -106,11 +108,9 @@
|
||||
paramter: {
|
||||
currentPage: 1,
|
||||
pagesize: 20,
|
||||
params: {
|
||||
customerphone: ''
|
||||
params: {},
|
||||
},
|
||||
},
|
||||
dataList: [{},{},{}],
|
||||
dataList: [],
|
||||
optionsList: [{
|
||||
text: '全部',
|
||||
count: 0,
|
||||
@@ -129,22 +129,18 @@
|
||||
value: ''
|
||||
}],
|
||||
identifying:{
|
||||
0: {
|
||||
1: {
|
||||
background: '#F83D3D',
|
||||
opacity: 1,
|
||||
value: "已上架"
|
||||
},
|
||||
1: {
|
||||
2: {
|
||||
background: '#F83D3D',
|
||||
opacity: 0.5,
|
||||
value: "待上架"
|
||||
}
|
||||
},
|
||||
statusEnum: {
|
||||
'-1': {
|
||||
color: '#F83D3D',
|
||||
value: "已驳回"
|
||||
},
|
||||
1: {
|
||||
color: '#8D38FC',
|
||||
value: "待审核"
|
||||
@@ -153,34 +149,38 @@
|
||||
color: '#FCB438',
|
||||
value: "已审核"
|
||||
},
|
||||
3: {
|
||||
color: '#F83D3D',
|
||||
value: "已驳回"
|
||||
},
|
||||
examineDetailList:[
|
||||
{
|
||||
createTime:'2023.11.22',
|
||||
status:'1',
|
||||
dateil:'未审核'
|
||||
},
|
||||
{
|
||||
createTime:'2023.11.23',
|
||||
status:'2',
|
||||
dateil:'已审核'
|
||||
},
|
||||
{
|
||||
createTime:'2023.11.24',
|
||||
status:'已驳回',
|
||||
dateil:'图片不清晰,请重新上传图片'
|
||||
}
|
||||
]
|
||||
examineDetailList:[],
|
||||
productData:{}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// this.getByPageCloudMini()
|
||||
this.productByPage()
|
||||
this.getTopInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectOptions(index) {
|
||||
this.currentIndex = index
|
||||
console.log(index,'index')
|
||||
if(index == 0){
|
||||
this.paramter.params ={}
|
||||
}else if(index ==1){
|
||||
this.paramter.params ={}
|
||||
this.paramter.params.productStatus = 1
|
||||
}else if(index ==2){
|
||||
this.paramter.params ={}
|
||||
this.paramter.params.productStatus = 2
|
||||
}else if(index ==3){
|
||||
this.paramter.params ={}
|
||||
this.paramter.params.auditStatus = 1
|
||||
}
|
||||
this.productByPage()
|
||||
},
|
||||
handler(json) {
|
||||
json = json.replace(/'/g, '"')
|
||||
@@ -197,12 +197,23 @@
|
||||
url: `../orderDetails/index?orderId=${item.orderId}`
|
||||
})
|
||||
},
|
||||
getTopInfo(){
|
||||
serve.getTopInfo(this.paramter).then(res => {
|
||||
if (res.code === 20000) {
|
||||
this.optionsList[0].count = res.data.count
|
||||
this.optionsList[1].count = res.data.availableCount
|
||||
this.optionsList[2].count = res.data.noAvailableCount
|
||||
this.optionsList[3].count = res.data.auditCount
|
||||
}
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.paramter.currentPage = 1
|
||||
this.getByPageCloudMini()
|
||||
this.productByPage()
|
||||
this.getTopInfo()
|
||||
},
|
||||
getByPageCloudMini() {
|
||||
serve.getByPageCloudMini(this.paramter).then(res => {
|
||||
productByPage() {
|
||||
serve.productByPage(this.paramter).then(res => {
|
||||
if (res.code === 20000) {
|
||||
if (!res.data.list.length) {
|
||||
uni.showToast({
|
||||
@@ -220,17 +231,41 @@
|
||||
},
|
||||
lower() {
|
||||
this.paramter.currentPage += 1
|
||||
this.getByPageCloudMini()
|
||||
this.productByPage()
|
||||
},
|
||||
examineDetail(){
|
||||
examineDetail(item){
|
||||
serve.productAuditHistory({id:item.id}).then(res=>{
|
||||
this.examineDetailList = res.data
|
||||
})
|
||||
this.$refs.detail.open('center')
|
||||
},
|
||||
orderDelete(){
|
||||
this.$refs.delete.open('center')
|
||||
},
|
||||
upDownFrame() {
|
||||
upDownFrame(item) {
|
||||
this.productData = item
|
||||
this.$refs.popup.open('center')
|
||||
},
|
||||
submitProduct(){
|
||||
let data = {}
|
||||
data.id = this.productData.id
|
||||
if(this.productData.productStatus ==1){
|
||||
data.productStatus = 2
|
||||
}else if(this.productData.productStatus ==2){
|
||||
data.productStatus = 1
|
||||
}
|
||||
|
||||
serve.productStatus(data).then(res=>{
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
if (res.code !== 20000) return
|
||||
this.$refs.popup.close()
|
||||
this.productByPage()
|
||||
this.getTopInfo()
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.controlWindows.code = false
|
||||
}
|
||||
@@ -249,6 +284,13 @@
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
>.search {
|
||||
margin: 50rpx auto 0;
|
||||
width: 689rpx;
|
||||
height: 74rpx;
|
||||
background: #FFF;
|
||||
|
||||
}
|
||||
>.options-frame {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -280,13 +322,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
>.search {
|
||||
margin: 50rpx auto 0;
|
||||
width: 689rpx;
|
||||
height: 74rpx;
|
||||
background: #F7F7F7;
|
||||
|
||||
}
|
||||
|
||||
>.list {
|
||||
margin-top: 35rpx;
|
||||
@@ -439,9 +474,16 @@
|
||||
color: #666;
|
||||
padding: 10rpx;
|
||||
view{
|
||||
width: 200rpx;
|
||||
width: 240rpx;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
>.status{
|
||||
width: 160rpx;
|
||||
>view{
|
||||
width: 160rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.header{
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
icon: 'none'
|
||||
});
|
||||
this.$refs.popup.close();
|
||||
this;getByPageCloudMini()
|
||||
this.getByPageCloudMini()
|
||||
uni.navigateTo({
|
||||
url: `../orderDetails/index?orderId=${this.dataList[0].orderId}`
|
||||
})
|
||||
|
||||
37
uni_modules/uni-data-select/changelog.md
Normal file
37
uni_modules/uni-data-select/changelog.md
Normal file
@@ -0,0 +1,37 @@
|
||||
## 1.0.7(2024-01-20)
|
||||
- 修复 长文本回显超过容器的bug,超过容器部分显示省略号
|
||||
## 1.0.6(2023-04-12)
|
||||
- 修复 微信小程序点击时会改变背景颜色的 bug
|
||||
## 1.0.5(2023-02-03)
|
||||
- 修复 禁用时会显示清空按钮
|
||||
## 1.0.4(2023-02-02)
|
||||
- 优化 查询条件短期内多次变更只查询最后一次变更后的结果
|
||||
- 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue
|
||||
## 1.0.3(2023-01-16)
|
||||
- 修复 不关联服务空间报错的问题
|
||||
## 1.0.2(2023-01-14)
|
||||
- 新增 属性 `format` 可用于格式化显示选项内容
|
||||
## 1.0.1(2022-12-06)
|
||||
- 修复 当where变化时,数据不会自动更新的问题
|
||||
## 0.1.9(2022-09-05)
|
||||
- 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框
|
||||
## 0.1.8(2022-08-29)
|
||||
- 修复 点击的位置不准确
|
||||
## 0.1.7(2022-08-12)
|
||||
- 新增 支持 disabled 属性
|
||||
## 0.1.6(2022-07-06)
|
||||
- 修复 pc端宽度异常的bug
|
||||
## 0.1.5
|
||||
- 修复 pc端宽度异常的bug
|
||||
## 0.1.4(2022-07-05)
|
||||
- 优化 显示样式
|
||||
## 0.1.3(2022-06-02)
|
||||
- 修复 localdata 赋值不生效的 bug
|
||||
- 新增 支持 uni.scss 修改颜色
|
||||
- 新增 支持选项禁用(数据选项设置 disabled: true 即禁用)
|
||||
## 0.1.2(2022-05-08)
|
||||
- 修复 当 value 为 0 时选择不生效的 bug
|
||||
## 0.1.1(2022-05-07)
|
||||
- 新增 记住上次的选项(仅 collection 存在时有效)
|
||||
## 0.1.0(2022-04-22)
|
||||
- 初始化
|
||||
@@ -0,0 +1,527 @@
|
||||
<template>
|
||||
<view class="uni-stat__select">
|
||||
<span v-if="label" class="uni-label-text hide-on-phone">{{label + ':'}}</span>
|
||||
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
||||
<view class="uni-select" :class="{'uni-select--disabled':disabled}">
|
||||
<view class="uni-select__input-box" @click="toggleSelector">
|
||||
<view v-if="current" class="uni-select__input-text">{{textShow}}</view>
|
||||
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
||||
<view v-if="current && clear && !disabled" @click.stop="clearVal" >
|
||||
<uni-icons type="clear" color="#c0c4cc" size="24"/>
|
||||
</view>
|
||||
<view v-else>
|
||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
||||
<view class="uni-select__selector" v-if="showSelector">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
||||
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
<view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
|
||||
@click="change(item)">
|
||||
<text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* DataChecklist 数据选择器
|
||||
* @description 通过数据渲染的下拉框组件
|
||||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
||||
* @property {String} value 默认值
|
||||
* @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}]
|
||||
* @property {Boolean} clear 是否可以清空已选项
|
||||
* @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效
|
||||
* @property {String} label 左侧标题
|
||||
* @property {String} placeholder 输入框的提示文字
|
||||
* @property {Boolean} disabled 是否禁用
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uni-data-select",
|
||||
mixins: [uniCloud.mixinDatacom || {}],
|
||||
props: {
|
||||
localdata: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
emptyTips: {
|
||||
type: String,
|
||||
default: '无选项'
|
||||
},
|
||||
clear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
defItem: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
|
||||
format: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSelector: false,
|
||||
current: '',
|
||||
mixinDatacomResData: [],
|
||||
apps: [],
|
||||
channels: [],
|
||||
cacheKey: "uni-data-select-lastSelectedValue",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.debounceGet = this.debounce(() => {
|
||||
this.query();
|
||||
}, 300);
|
||||
if (this.collection && !this.localdata.length) {
|
||||
this.debounceGet();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typePlaceholder() {
|
||||
const text = {
|
||||
'opendb-stat-app-versions': '版本',
|
||||
'opendb-app-channels': '渠道',
|
||||
'opendb-app-list': '应用'
|
||||
}
|
||||
const common = this.placeholder
|
||||
const placeholder = text[this.collection]
|
||||
return placeholder ?
|
||||
common + placeholder :
|
||||
common
|
||||
},
|
||||
valueCom(){
|
||||
// #ifdef VUE3
|
||||
return this.modelValue;
|
||||
// #endif
|
||||
// #ifndef VUE3
|
||||
return this.value;
|
||||
// #endif
|
||||
},
|
||||
textShow(){
|
||||
// 长文本显示
|
||||
let text = this.current;
|
||||
if (text.length > 10) {
|
||||
return text.slice(0, 25) + '...';
|
||||
}
|
||||
return text;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
localdata: {
|
||||
immediate: true,
|
||||
handler(val, old) {
|
||||
if (Array.isArray(val) && old !== val) {
|
||||
this.mixinDatacomResData = val
|
||||
}
|
||||
}
|
||||
},
|
||||
valueCom(val, old) {
|
||||
this.initDefVal()
|
||||
},
|
||||
mixinDatacomResData: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val.length) {
|
||||
this.initDefVal()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
debounce(fn, time = 100){
|
||||
let timer = null
|
||||
return function(...args) {
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => {
|
||||
fn.apply(this, args)
|
||||
}, time)
|
||||
}
|
||||
},
|
||||
// 执行数据库查询
|
||||
query(){
|
||||
this.mixinDatacomEasyGet();
|
||||
},
|
||||
// 监听查询条件变更事件
|
||||
onMixinDatacomPropsChange(){
|
||||
if (this.collection) {
|
||||
this.debounceGet();
|
||||
}
|
||||
},
|
||||
initDefVal() {
|
||||
let defValue = ''
|
||||
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
||||
defValue = this.valueCom
|
||||
} else {
|
||||
let strogeValue
|
||||
if (this.collection) {
|
||||
strogeValue = this.getCache()
|
||||
}
|
||||
if (strogeValue || strogeValue === 0) {
|
||||
defValue = strogeValue
|
||||
} else {
|
||||
let defItem = ''
|
||||
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
||||
defItem = this.mixinDatacomResData[this.defItem - 1].value
|
||||
}
|
||||
defValue = defItem
|
||||
}
|
||||
if (defValue || defValue === 0) {
|
||||
this.emit(defValue)
|
||||
}
|
||||
}
|
||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||
this.current = def ? this.formatItemName(def) : ''
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {[String, Number]} value
|
||||
* 判断用户给的 value 是否同时为禁用状态
|
||||
*/
|
||||
isDisabled(value) {
|
||||
let isDisabled = false;
|
||||
|
||||
this.mixinDatacomResData.forEach(item => {
|
||||
if (item.value === value) {
|
||||
isDisabled = item.disable
|
||||
}
|
||||
})
|
||||
|
||||
return isDisabled;
|
||||
},
|
||||
|
||||
clearVal() {
|
||||
this.emit('')
|
||||
if (this.collection) {
|
||||
this.removeCache()
|
||||
}
|
||||
},
|
||||
change(item) {
|
||||
if (!item.disable) {
|
||||
this.showSelector = false
|
||||
this.current = this.formatItemName(item)
|
||||
this.emit(item.value)
|
||||
}
|
||||
},
|
||||
emit(val) {
|
||||
this.$emit('input', val)
|
||||
this.$emit('update:modelValue', val)
|
||||
this.$emit('change', val)
|
||||
if (this.collection) {
|
||||
this.setCache(val);
|
||||
}
|
||||
},
|
||||
toggleSelector() {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
this.showSelector = !this.showSelector
|
||||
},
|
||||
formatItemName(item) {
|
||||
let {
|
||||
text,
|
||||
value,
|
||||
channel_code
|
||||
} = item
|
||||
channel_code = channel_code ? `(${channel_code})` : ''
|
||||
|
||||
if (this.format) {
|
||||
// 格式化输出
|
||||
let str = "";
|
||||
str = this.format;
|
||||
for (let key in item) {
|
||||
str = str.replace(new RegExp(`{${key}}`,"g"),item[key]);
|
||||
}
|
||||
return str;
|
||||
} else {
|
||||
return this.collection.indexOf('app-list') > 0 ?
|
||||
`${text}(${value})` :
|
||||
(
|
||||
text ?
|
||||
text :
|
||||
`未命名${channel_code}`
|
||||
)
|
||||
}
|
||||
},
|
||||
// 获取当前加载的数据
|
||||
getLoadData(){
|
||||
return this.mixinDatacomResData;
|
||||
},
|
||||
// 获取当前缓存key
|
||||
getCurrentCacheKey(){
|
||||
return this.collection;
|
||||
},
|
||||
// 获取缓存
|
||||
getCache(name=this.getCurrentCacheKey()){
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
return cacheData[name];
|
||||
},
|
||||
// 设置缓存
|
||||
setCache(value, name=this.getCurrentCacheKey()){
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
cacheData[name] = value;
|
||||
uni.setStorageSync(this.cacheKey, cacheData);
|
||||
},
|
||||
// 删除缓存
|
||||
removeCache(name=this.getCurrentCacheKey()){
|
||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
||||
delete cacheData[name];
|
||||
uni.setStorageSync(this.cacheKey, cacheData);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-base-color: #6a6a6a !default;
|
||||
$uni-main-color: #333 !default;
|
||||
$uni-secondary-color: #909399 !default;
|
||||
$uni-border-3: #e5e5e5;
|
||||
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
@media screen and (max-width: 500px) {
|
||||
.hide-on-phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.uni-stat__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 15px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-stat-box {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-stat__actived {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
// outline: 1px solid #2979ff;
|
||||
}
|
||||
|
||||
.uni-label-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: $uni-base-color;
|
||||
margin: auto 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.uni-select {
|
||||
font-size: 14px;
|
||||
border: 1px solid $uni-border-3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
user-select: none;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: solid 1px $uni-border-3;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 35px;
|
||||
|
||||
&--disabled {
|
||||
background-color: #f5f7fa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-select__label {
|
||||
font-size: 16px;
|
||||
// line-height: 22px;
|
||||
height: 35px;
|
||||
padding-right: 10px;
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.uni-select__input-box {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-select__input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.uni-select__input-plac {
|
||||
font-size: 14px;
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.uni-select__selector {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #EBEEF5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 3;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.uni-select__selector-scroll {
|
||||
/* #ifndef APP-NVUE */
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifdef H5 */
|
||||
@media (min-width: 768px) {
|
||||
.uni-select__selector-scroll {
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.uni-select__selector-empty,
|
||||
.uni-select__selector-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
/* border-bottom: solid 1px $uni-border-3; */
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.uni-select__selector-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.uni-select__selector-empty:last-child,
|
||||
.uni-select__selector-item:last-child {
|
||||
/* #ifndef APP-NVUE */
|
||||
border-bottom: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-select__selector__disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* picker 弹出层通用的指示小三角 */
|
||||
.uni-popper__arrow,
|
||||
.uni-popper__arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.uni-popper__arrow {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
top: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.uni-popper__arrow::after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.uni-select__input-text {
|
||||
// width: 280px;
|
||||
width: 100%;
|
||||
color: $uni-main-color;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-select__input-placeholder {
|
||||
color: $uni-base-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uni-select--mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
85
uni_modules/uni-data-select/package.json
Normal file
85
uni_modules/uni-data-select/package.json
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "uni-data-select",
|
||||
"displayName": "uni-data-select 下拉框选择器",
|
||||
"version": "1.0.7",
|
||||
"description": "通过数据驱动的下拉框选择器",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"select",
|
||||
"uni-data-select",
|
||||
"下拉框",
|
||||
"下拉选"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.1"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-load-more"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"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",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
uni_modules/uni-data-select/readme.md
Normal file
8
uni_modules/uni-data-select/readme.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## DataSelect 下拉框选择器
|
||||
> **组件名:uni-data-select**
|
||||
> 代码块: `uDataSelect`
|
||||
|
||||
当选项过多时,使用下拉菜单展示并选择内容
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
Reference in New Issue
Block a user