caoliancun/LSM_OIL_SITE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

积分商城

Browse Source
This commit is contained in:
zhangyouji
2024-03-28 09:43:43 +08:00
parent 8d314157fe
commit de92031284
11 changed files with 1301 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
packageIntegral/productAddition/index.vue
View File

@@ -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,10 +58,78 @@
<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>
<view @click="addCompleted">完成</view>
</view>
</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',
}
]
}],
radioItem:[{
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
})
checkboxArr[index].checked = true;//改变当前选中的checked值
// this.setData({
// checkboxArr: checkboxArr
// });
// if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回
// checkboxArr.forEach(item => {
// item.checked = false
// })
if(checkboxArr[index].checked ==false){
checkboxArr[index].checked = true; //改变当前选中的checked值
}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
}
},
checkboxChange (e) {
var checkValue = e.detail.value;
// this.setData({
// checkValue: checkValue
// });
},
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;

122
packageIntegral/productAddition/productAddStep2.vue
View File

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