14 changed files with 4023 additions and 28 deletions
@ -0,0 +1,319 @@ |
|||
<template> |
|||
<view class=""> |
|||
<view class="btn"> |
|||
<button type="primary" :loading="isSearching" v-if="isSearching == false" @tap="startSearch(true)" |
|||
text="">搜索蓝牙设备 |
|||
</button> |
|||
<button type="primary" :loading="isSearching" v-if="isSearching == true" @tap="stopSearch" text="">搜索蓝牙设备 |
|||
</button> |
|||
<button type="primary" style="margin-top: 40rpx;" v-if="okAddress !=''" @tap="endSearch(true)" |
|||
text="">删除已连接蓝牙设备 |
|||
</button> |
|||
<button type="primary" style="margin-top: 40rpx;font-size: 32rpx;" :loading="isPrint" v-if="okAddress" |
|||
@tap="pickUpOnce" text=''>打印测试</button> |
|||
</view> |
|||
|
|||
<view class="content"> |
|||
<text>新设备</text> |
|||
<view v-for="(item) in list" :data-title="item.deviceId" :data-name="item.name" |
|||
:data-advertisData="item.advertisServiceUUIDs" :key="item.deviceId" |
|||
@tap="bindViewTap(item.deviceId,true)"> |
|||
<view> |
|||
<text>{{item.name}}</text> |
|||
<view v-if="linkAddress == item.deviceId" style="background-color: #4caf50;">正在匹配</view> |
|||
<view v-if="okAddress == item.deviceId">匹配成功</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import PrinterJobs from '@/components/print/printerjobs.js' |
|||
import printerUtil from '@/components/print/printerutil.js' |
|||
import util from '@/components/print/util.js' |
|||
import drawQrcode from '@/components/print/weapp.qrcode.esm.js' |
|||
import Bluetooth from '@/components/print/bluetooth.js' |
|||
let bluetooth = new Bluetooth(); |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
isSearching: false, |
|||
list: [], |
|||
okAddress: '', |
|||
linkAddress: '', |
|||
data: { |
|||
"settled_name": "#0112配送", |
|||
"detail": { |
|||
"total_amount": "137.00", |
|||
"other_amount": "0.00", |
|||
"discount_amount": "0.00", |
|||
"actual_amount": "137.00", |
|||
"order_sn": "20220512165337", |
|||
"goods_count": 3, |
|||
"order_time": "2022-05-12 16:53:00", |
|||
"supplier_id": 1 |
|||
}, |
|||
"code": "https://www.oulaisong.com/purchase?id=8", |
|||
"list": [{ |
|||
"id": 8, |
|||
"goods_name": "红烧带鱼", |
|||
"article_number": "1", |
|||
'sum_price':'16.00' |
|||
}, { |
|||
"id": 9, |
|||
"goods_name": "女童外套", |
|||
"article_number": "2", |
|||
|
|||
"sum_price": "34.00" |
|||
}, { |
|||
"id": 10, |
|||
"goods_name": "25", |
|||
"article_number": "3", |
|||
"sum_price": "3.00" |
|||
}] |
|||
}, |
|||
isPrint: false, |
|||
} |
|||
}, |
|||
//页面卸载是关闭蓝牙链接 |
|||
// onUnload() { |
|||
// uni.hideLoading() |
|||
// bluetooth.closeBLEConnection(); |
|||
// bluetooth.closeBluetoothAdapter(); |
|||
// }, |
|||
//页面打开,获取位置,打开蓝牙链接 |
|||
onLoad() { |
|||
uni.getLocation({ |
|||
type: 'wgs84', |
|||
success: function(res) { |
|||
console.log('当前位置的经度：' + res.longitude); |
|||
console.log('当前位置的纬度：' + res.latitude); |
|||
} |
|||
}); |
|||
// this.getData() |
|||
|
|||
}, |
|||
onShow() { |
|||
console.log('---') |
|||
}, |
|||
methods: { |
|||
endSearch(){ |
|||
uni.hideLoading() |
|||
bluetooth.closeBLEConnection(); |
|||
bluetooth.closeBluetoothAdapter(); |
|||
this.okAddress = '' |
|||
}, |
|||
getData() { |
|||
var that = this; |
|||
that.startSearch(false); |
|||
}, |
|||
async bindViewTap(deviceId, state) { |
|||
var _this = this; |
|||
_this.okAddress = ''; |
|||
_this.linkAddress = deviceId; |
|||
console.log(deviceId) |
|||
if (state == true) { |
|||
_this.isSearching = false |
|||
} |
|||
try { |
|||
//1.链接设备 |
|||
await bluetooth.createBLEConnection(deviceId).then((res) => { |
|||
bluetooth.deviceId = deviceId; |
|||
}).catch((e) => { |
|||
throw e; |
|||
}); |
|||
|
|||
let server = []; |
|||
//2.寻找服务 |
|||
await bluetooth.getBLEDeviceServices().then((res) => { |
|||
console.log(res) |
|||
bluetooth.notifyId = ''; |
|||
bluetooth.writeId = ''; |
|||
bluetooth.num = 0; |
|||
bluetooth.serviceList = res |
|||
}).catch((e) => { |
|||
throw e; |
|||
}); |
|||
|
|||
//3.获取蓝牙设备所有服务 |
|||
let result3 = await bluetooth.getBLEDeviceCharacteristics().then(res => { |
|||
_this.okAddress = deviceId; |
|||
_this.linkAddress = ''; |
|||
uni.setStorageSync('bluetoothDeviceId', deviceId); |
|||
}).catch((e) => { |
|||
throw e; |
|||
}); |
|||
} catch (e) { |
|||
_this.okAddress = ''; |
|||
_this.linkAddress = ''; |
|||
//TODO handle the exception |
|||
console.log("e: " + JSON.stringify(e)); |
|||
} |
|||
}, |
|||
//打印一次 |
|||
pickUpOnce() { |
|||
this.isPrint = true; |
|||
bluetooth.notifyBLECharacteristicValue(); |
|||
let self = this; |
|||
setTimeout(() => { |
|||
self.writeBLECharacteristicValue(); |
|||
}, 500); |
|||
}, |
|||
//写入控制命令 |
|||
async writeBLECharacteristicValue() { |
|||
let data = this.data; |
|||
let printerJobs = new PrinterJobs(); |
|||
printerJobs.setAlign('ct').setSize(2, 2).setLineSpacing(80).print('#0112配送') |
|||
.setAlign('lt').setSize(1, 1).setLineSpacing(40).print('预计时间:2026-02-01 13:41:00') |
|||
.setAlign('lt').setSize(1, 1).setLineSpacing(40).print('七里香快餐明珠店') |
|||
.print(printerUtil.fillLine('-', 1, 50)) |
|||
.setAlign('lt').setSize(2, 2).setLineSpacing(80).print('王先生') |
|||
.setAlign('lt').setSize(1, 1).setLineSpacing(40).print('联系电话: *******0775') |
|||
.setAlign('lt').setSize(2, 2).setLineSpacing(80).print('地址:黑背生东川建设集团有限公司黑恶生运河区****') |
|||
.setAlign('lt').setSize(1, 1).setLineSpacing(40).print('为保护隐私，顾客电话及地址已被隐藏，您可登录商家端或骑手端查看') |
|||
.print(printerUtil.fillLine('-', 1, 50)); |
|||
|
|||
|
|||
for (var i = 0; i < data.list.length; i++) { |
|||
printerJobs.setAlign('lt').setSize(1, 1).setLineSpacing(40).print(data.list[i].goods_name) |
|||
|
|||
|
|||
let setLineSpacing = 40 |
|||
|
|||
printerJobs.setLineSpacing(setLineSpacing).print(printerUtil.inlineArr([{ |
|||
'text': 'X' + data.list[i].article_number, |
|||
'width': 20, |
|||
}, { |
|||
'text': data.list[i].sum_price, |
|||
'width': 10, |
|||
}], 1, 50)); |
|||
} |
|||
printerJobs.print(printerUtil.fillLine('-', 1, 50)) |
|||
.setAlign('lt').setSize(1, 1).setLineSpacing(40).print('配送费：1圆') |
|||
.setAlign('lt').setSize(1, 1).setLineSpacing(40).print('合计金额：17圆') |
|||
.print(printerUtil.fillLine('-', 1, 50)) |
|||
.setAlign('lt').setSize(1, 1).setLineSpacing(40).print('商品取到后，如有任何商品问题，请及时联系商家和平台，客服将为您服务，客服电话15533910775，谢谢您的惠顾') |
|||
.println(); |
|||
let buffer = printerJobs.buffer(); |
|||
this.sendPrint(buffer); |
|||
}, |
|||
sendPrint(buffer) { |
|||
// 1.并行调用多次会存在写失败的可能性 |
|||
// 2.建议每次写入不超过20字节 |
|||
// 分包处理，延时调用 |
|||
let that = this |
|||
const maxChunk = 20; |
|||
const delay = 20; |
|||
that.isPrint = true; |
|||
for (let i = 0, j = 0, length = buffer.byteLength; i < length; i += maxChunk, j++) { |
|||
let subPackage = buffer.slice(i, i + maxChunk <= length ? (i + maxChunk) : length); |
|||
setTimeout(this.sendPrintData, j * delay, subPackage); |
|||
} |
|||
that.isPrint = false; |
|||
}, |
|||
sendPrintData(buffer) { |
|||
bluetooth.writeBLECharacteristicValue(buffer).then(res => {}); |
|||
}, |
|||
startSearch(state) { |
|||
let that = this |
|||
bluetooth.openBluetoothAdapter().then(e => { |
|||
that.isSearching = true; |
|||
uni.startBluetoothDevicesDiscovery({ |
|||
success: res => { |
|||
uni.onBluetoothDeviceFound(result => { |
|||
let arr = that.list; |
|||
let devices = []; |
|||
let list = result.devices; |
|||
for (let i = 0; i < list.length; ++i) { |
|||
console.log(list[i]) |
|||
if (list[i].name && list[i].name != "未知设备") { |
|||
let arrNew = arr.filter((item) => { |
|||
return item.deviceId == list[i].deviceId; |
|||
}); |
|||
if (arrNew.length == 0) { |
|||
devices.push(list[i]); |
|||
} |
|||
if (uni.getStorageSync('bluetoothDeviceId') == list[i] |
|||
.deviceId) { |
|||
// that.bindViewTap(list[i].deviceId, state) |
|||
} |
|||
} |
|||
} |
|||
that.list = arr.concat(devices); |
|||
}); |
|||
}, |
|||
fail: res => { |
|||
uni.hideLoading(); |
|||
uni.showToast({ |
|||
title: `搜索设备失败` + JSON.stringify(err) |
|||
}) |
|||
} |
|||
}) |
|||
}).catch(e => { |
|||
console.log(e) |
|||
}); |
|||
}, |
|||
// 停止搜索 |
|||
stopSearch() { |
|||
this.isSearching = false; |
|||
uni.hideLoading(); |
|||
bluetooth.stopBluetoothDevicesDiscovery(); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
background: #F7F8FA; |
|||
} |
|||
</style> |
|||
<style scoped lang="scss"> |
|||
.btn { |
|||
padding: 40rpx; |
|||
} |
|||
|
|||
.content { |
|||
padding: 40rpx; |
|||
|
|||
&>text { |
|||
display: block; |
|||
padding-bottom: 30rpx; |
|||
font-size: 28rpx; |
|||
color: #333 |
|||
} |
|||
|
|||
&>view { |
|||
background-color: #fff; |
|||
padding: 30rpx 40rpx; |
|||
margin-bottom: 24rpx; |
|||
|
|||
&>view { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
&>text { |
|||
margin-left: 24rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
|
|||
&>view { |
|||
border-radius: 10rpx; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
background-color: #3769FF; |
|||
padding: 5rpx 10rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&>view:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,881 @@ |
|||
<!-- 底部菜单--库存--新增商品 --> |
|||
<template> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
新增商品 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="formBox"> |
|||
<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="170rpx"> |
|||
<uni-forms-item label="商品名称" name="productName" required> |
|||
<uni-easyinput type="text" v-model="formData.productName" placeholder="请输入商品名称" trim="all" /> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="商品主图" name="productPicture"> |
|||
<view style="display: flex;"> |
|||
<view class="upload-img" @tap="pictureAdd" |
|||
style="background: #eee;text-align: center;line-height: 160rpx;"> |
|||
<uni-icons type="camera" size="28" color="#777"></uni-icons> |
|||
</view> |
|||
<view style="overflow-x: scroll;display: flex;width: 350rpx;"> |
|||
<view v-if="formData.productPicture !=''" style="width: 160rpx;height: 160rpx;margin-left: 20rpx;"> |
|||
<img :src="formData.productPicture" alt="" class="upload-img"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</uni-forms-item> |
|||
<uni-forms-item label="排名" name="orderFiled"> |
|||
<input type="digit" class="content-input" v-model="formData.orderFiled" placeholder="请输入排名"> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="商品分类" name="editTitle"> |
|||
<view style="border: 4rpx solid #eee;display: flex;flex: 1;border-radius: 10rpx;"> |
|||
<input type="text" placeholder="请选择商品分类" disabled v-model="typeItem.categoryName" |
|||
class="content-input" @tap="goGategoryLow" style="border: 0;"> |
|||
<uni-icons type="right" size="16" |
|||
style="margin-left: 40rpx;line-height: 70rpx;"></uni-icons> |
|||
</view> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="商品规格" name="attributeListPrice"> |
|||
<view> |
|||
<view v-for="(item,index) in formData.attributeListPrice" :key="index" style="display: flex;margin-top:10rpx;"> |
|||
<input class="content-input" v-model="item.specName" v-if="item.specName != ''&& formData.attributeListPrice.length != 1" style="padding-right: 20rpx;" disabled /> |
|||
<input class="content-input" v-model="item.specPrice" style="padding-right: 20rpx;margin-right: 20rpx;" @click="changePrice(index)" placeholder="商品价格" /> |
|||
<input class="content-input" v-model="item.specNum" style="padding-right: 20rpx;" @click="changecount(index)" placeholder="商品库存"/> |
|||
<button @click="deldantiaoguige(index)" v-if="formData.attributeListPrice.length>1" style="width: 240rpx;height: 60rpx;line-height: 60rpx;color: red;border:none;background: #fff;">删除</button> |
|||
</view> |
|||
<!-- <view @click="checkSpec('guige')" style="margin-top: 5px;width: 80px;height: 30px;text-align: center;line-height: 30px;background: rgba(0, 35, 28, 1);border-radius: 30px;color: rgba(166, 255, 234, 1);"> |
|||
选择规格 |
|||
</view> --> |
|||
</view> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="拼团信息" name="productGroupBuyPrices"> |
|||
<view> |
|||
<view v-for="(item,index) in formData.productGroupBuyPrices" :key="index" style="display: flex;margin-top:10rpx;"> |
|||
<input class="content-input" v-model="item.groupCount" style="padding-right: 20rpx;margin-right: 20rpx;" placeholder="成团人数" /> |
|||
<input class="content-input" v-model="item.groupPrice" style="padding-right: 20rpx;" placeholder="成团价格"/> |
|||
<button @click="delGroup(index)" v-if="formData.productGroupBuyPrices.length>1" style="width: 240rpx;height: 60rpx;line-height: 60rpx;color: red;border:none;background: #fff;">删除</button> |
|||
</view> |
|||
<view @click="addGroup()" style="margin-top: 10rpx;width: 160rpx;height: 60rpx;text-align: center;line-height: 60rpx;background: rgba(0, 35, 28, 1);border-radius: 60rpx;color: rgba(166, 255, 234, 1);"> |
|||
新增拼团 |
|||
</view> |
|||
</view> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="商品属性" name="attributeList1"> |
|||
<view style="display: flex;flex-direction: column;"> |
|||
<view v-for="(value,key) in Array.from(formData.attributeList1)" :key="index" style="display: flex;"> |
|||
{{value[0]}}: |
|||
<view v-for="(item,index) in value[1].title" :key="index"> |
|||
{{item}}、 |
|||
</view> |
|||
</view> |
|||
<view @click="checkSpec('shuxing')" style="width: 160rpx;height: 60rpx;text-align: center;line-height: 60rpx;background: rgba(0, 35, 28, 1);border-radius: 60rpx;color: rgba(166, 255, 234, 1);"> |
|||
选择属性 |
|||
</view> |
|||
</view> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="可售时间" name="sellTime"> |
|||
<view style="display: flex;flex-direction: column;"> |
|||
<view style="line-height: 74rpx;"> |
|||
<radio :checked="formData.sellTime==0" name="sellTime" @click="checkSellTime(0)" />全时段售卖 |
|||
<radio :checked="formData.sellTime==1" name="sellTime" @click="checkSellTime(1)" />自定义时段 |
|||
</view> |
|||
<view style="display: flex;" v-if="formData.sellTime == 1"> |
|||
<picker mode="time" v-model="formData.sellBeginTime" start="00:00" end="23:59" @change="selectDateRange($event,'start')"> |
|||
<view class="uni-input">{{formData.sellBeginTime}}</view> |
|||
</picker> |
|||
<view style="width: 50rpx;height: 50rpx;line-height: 50rpx;text-align: center;">-</view> |
|||
<picker mode="time" v-model="formData.sellEndTime" start="00:00" end="23:59" @change="selectDateRange($event,'end')"> |
|||
<view class="uni-input">{{formData.sellEndTime}}</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="设置加料" name="isMoreBuy"> |
|||
<view style="line-height: 74rpx;"> |
|||
<radio :checked="formData.isMoreBuy==0" name="isMoreBuy" @click="checkisMoreBuy('0')" />否 |
|||
<radio :checked="formData.isMoreBuy==1" name="isMoreBuy" @click="checkisMoreBuy('1')" />是 |
|||
</view> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="餐盒费" name="lunchBox"> |
|||
<input type="digit" class="content-input" v-model="formData.lunchBox" placeholder="请输入餐盒费"> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="起售数量" name="startPayNum"> |
|||
<input type="digit" class="content-input" v-model="formData.startPayNum" placeholder="请输入起售数量"> |
|||
</uni-forms-item> |
|||
<uni-forms-item label="详细图文" name="startPayNum"> |
|||
<view class="xiangxi-box"> |
|||
<sp-editor |
|||
@init="initEditor" |
|||
@input="inputOver" |
|||
@upinImage="upinImage" |
|||
@overMax="overMax"> |
|||
</sp-editor> |
|||
</view> |
|||
</uni-forms-item> |
|||
</uni-forms> |
|||
<view> |
|||
<button @tap.stop="submit()">保存</button> |
|||
</view> |
|||
</view> |
|||
<!-- 添加分类弹出层 --> |
|||
<uni-popup ref="addTypeDialog" background-color="#fff"> |
|||
<view class="add-popup-content"> |
|||
<view style="height:900rpx;"> |
|||
<view class="content-left" style="float: left;"> |
|||
<view class="left-box" v-for="(item,index) in categoryData" :key="index" |
|||
:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)"> |
|||
<text style="width: 100%;height: 100rpx;line-height: 100rpx;display: inline-block;overflow: hidden;" |
|||
:class="item.parentId ? 'red' :''">{{item.title}}</text> |
|||
</view> |
|||
</view> |
|||
<view v-for="(item,index) in categorySonData" :key="index" @tap="checkSpecValue(index)" class="content-low" :class="item.checked?'checked':''"> |
|||
{{item.title}} |
|||
</view> |
|||
</view> |
|||
<view slot="footer" style="display: flex;padding-left: 40rpx;margin-top: 20rpx;"> |
|||
<button type="text" @tap="$refs.addTypeDialog.close()" style="margin-right: 20rpx;">取消</button> |
|||
<button type="text" @tap="guigeSubmit">提交</button> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
dataList: {}, |
|||
modalType:0, |
|||
categoryData:[], |
|||
categoryIndex: 0, |
|||
modalclassType:'', |
|||
categorySonData:[], |
|||
specValueArr:[], |
|||
attrValueArr:[], |
|||
editorIns: null, |
|||
typeItem: {}, |
|||
formData: { |
|||
id: '', |
|||
shopId: '', |
|||
categoryId: '', //商品分类id |
|||
categoryName: '', //商品分类名称 |
|||
productPicture: '', //商品图标 |
|||
productName: '', //商品名称 |
|||
orderFiled: '', //商品名称 |
|||
lunchBox: 0, //餐盒 |
|||
startPayNum: '', //起售数量 |
|||
attributeListPrice: [{ //商品规格 |
|||
specPrice: "", |
|||
specNum: 9999 |
|||
}], |
|||
shopId:'', |
|||
sellTime: 0, //可售时间 |
|||
isMoreBuy: 0, |
|||
sellBeginTime: '', //可售时段自定义---开始时间 |
|||
sellEndTime: '', //可售时段自定义---结束时间 |
|||
attributeList: '', |
|||
productGroupBuyPrices: [], |
|||
attributeList1: new Map(), //商品属性 |
|||
productIntro: "" //详细图文 |
|||
}, |
|||
rules: { |
|||
productName: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请输入名称', |
|||
}] |
|||
}, |
|||
categoryId: { |
|||
rules: [{ |
|||
required: true, |
|||
errorMessage: '请选择商品分类', |
|||
}, ], |
|||
}, |
|||
}, |
|||
} |
|||
}, |
|||
filters: { |
|||
|
|||
}, |
|||
onShow() { |
|||
// uni.authorize({ |
|||
// scope: 'scope.writePhotosAlbum', |
|||
// success() { |
|||
|
|||
// }, |
|||
// fail() { |
|||
// this.tui.toast("您未授权，图片上传功能可能会出现错误") |
|||
// } |
|||
// }) |
|||
this.typeItem = JSON.parse(JSON.stringify(this.typeItem)) || '' |
|||
if (this.typeItem) { |
|||
this.formData.categoryId = this.typeItem.id |
|||
} |
|||
this.formData.shopId = uni.getStorageSync('shopId') |
|||
}, |
|||
onLoad(option) { |
|||
this.getGategoryList() |
|||
if (option.dataList) { |
|||
this.dataList = JSON.parse(option.dataList) |
|||
this.NB.sendRequest("/app/product/getById/"+ this.dataList.id, {}, false, 'POST', 'application/json').then((res) => { |
|||
if (res.code == 200) { |
|||
this.modalType = 1 |
|||
this.formData.id = res.result.id |
|||
this.formData.shopId = res.result.shopId |
|||
this.formData.categoryName = res.result.categoryName |
|||
this.formData.orderFiled = res.result.orderFiled |
|||
this.formData.lunchBox = res.result.lunchBox |
|||
this.formData.startPayNum = res.result.startPayNum |
|||
this.formData.attributeListPrice = JSON.parse(res.result.attributeListPrice) |
|||
this.formData.shopId = res.result.shopId |
|||
this.formData.sellTime = res.result.sellBeginTime !=''?1:0 |
|||
this.formData.isMoreBuy = res.result.isMoreBuy |
|||
this.formData.sellBeginTime = res.result.sellBeginTime |
|||
this.formData.sellEndTime = res.result.sellEndTime |
|||
this.formData.attributeList = res.result.attributeList |
|||
this.formData.productGroupBuyPrices = res.result.productGroupBuyPrices |
|||
this.formData.attributeList1 = new Map() |
|||
this.formData.productName = res.result.productName |
|||
this.formData.productPicture = res.result.productPicture |
|||
this.formData.productIntro = res.result.productIntro |
|||
this.formData.categoryId = res.result.categoryId |
|||
this.edit(this.formData) |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 获取输入内容 |
|||
* @param {Object} e {html,text} 内容的html文本，和text文本 |
|||
*/ |
|||
inputOver(e) { |
|||
// 可以在此处获取到编辑器已编辑的内容 |
|||
console.log('==== inputOver :', e) |
|||
this.productIntro = e |
|||
}, |
|||
/** |
|||
* 超出最大内容限制 |
|||
* @param {Object} e {html,text} 内容的html文本，和text文本 |
|||
*/ |
|||
overMax(e) { |
|||
// 若设置了最大字数限制，可在此处触发超出限制的回调 |
|||
console.log('==== overMax :', e) |
|||
}, |
|||
/** |
|||
* 编辑器就绪 |
|||
* @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法 |
|||
* @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6 |
|||
* @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html |
|||
*/ |
|||
initEditor(editor) { |
|||
this.editorIns = editor // 保存编辑器实例 |
|||
// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容 |
|||
|
|||
}, |
|||
/** |
|||
* 直接运行示例工程插入图片无法正常显示的看这里 |
|||
* 因为插件默认采用云端存储图片的方式 |
|||
* 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调 |
|||
* @param {Object} tempFiles |
|||
* @param {Object} editorCtx |
|||
*/ |
|||
upinImage(tempFiles, editorCtx) { |
|||
/** |
|||
* 本地临时插入图片预览 |
|||
* 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中 |
|||
* 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释 |
|||
* @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage |
|||
*/ |
|||
// #ifdef MP-WEIXIN |
|||
// 注意微信小程序的图片路径是在tempFilePath字段中 |
|||
editorCtx.insertImage({ |
|||
src: tempFiles[0].tempFilePath, |
|||
width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑 |
|||
success: function() {} |
|||
}) |
|||
// #endif |
|||
|
|||
// #ifndef MP-WEIXIN |
|||
editorCtx.insertImage({ |
|||
src: tempFiles[0].path, |
|||
width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑 |
|||
success: function() {} |
|||
}) |
|||
// #endif |
|||
|
|||
/** |
|||
* 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传） |
|||
* 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法 |
|||
*/ |
|||
// tempFiles.forEach(async (item) => { |
|||
// uni.showLoading({ |
|||
// title: '上传中请稍后', |
|||
// mask: true |
|||
// }) |
|||
// let upfile = await uniCloud.uploadFile({ |
|||
// filePath: item.path, |
|||
// // 同名会导致报错 policy_does_not_allow_file_overwrite |
|||
// // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中 |
|||
// cloudPath: `cloudstorage/${item.name}`, |
|||
// cloudPathAsRealPath: true |
|||
// }) |
|||
// editorCtx.insertImage({ |
|||
// src: upfile.fileID, |
|||
// width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑 |
|||
// success: function () { |
|||
// uni.hideLoading() |
|||
// } |
|||
// }) |
|||
// }) |
|||
}, |
|||
//跳转分类页 |
|||
goGategoryLow() { |
|||
uni.navigateTo({ |
|||
url: '/pages/shop/addType' |
|||
}) |
|||
}, |
|||
//初始化获取分类列表 |
|||
getGategoryList() { |
|||
|
|||
this.NB.sendRequest("/app/productCategory/list", { |
|||
shopId:uni.getStorageSync('shopId') |
|||
}, false, 'get', 'application/json').then((res) => { |
|||
if (res.code == 200) { |
|||
if (res.result.length > 0) { |
|||
if(this.formData.categoryId != '' && this.formData.categoryId != undefined){ |
|||
for(let i=0;i<res.result.length;i++){ |
|||
if(res.result[i].id == this.formData.categoryId){ |
|||
this.typeItem = res.result[i] |
|||
} |
|||
} |
|||
}else{ |
|||
this.typeItem = res.result[0] |
|||
this.formData.categoryId = this.typeItem.id |
|||
} |
|||
|
|||
} |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
// 触发提交表单 |
|||
submit() { |
|||
let that = this; |
|||
// this.$refs.form.validate((valid) => { |
|||
// if (valid) { |
|||
if (this.modalType == 0) { |
|||
// 添加 避免编辑后传入id等数据 记得删除 |
|||
delete this.formData.id; |
|||
if(this.formData.isMoreBuy != 1){ |
|||
this.formData.isMoreBuy = 0 |
|||
} |
|||
this.formData.attributeListPrice = JSON.stringify(this.formData.attributeListPrice) |
|||
this.formData.attributeList = Object.fromEntries(this.formData.attributeList1) |
|||
this.formData.attributeList = JSON.stringify(this.formData.attributeList) |
|||
|
|||
this.NB.sendRequest("/app/product/save", this.formData, false, 'post', 'application/json').then((res) => { |
|||
if(res.code == 200){ |
|||
that.tui.toast("操作成功"); |
|||
uni.navigateBack() |
|||
} |
|||
}).catch(() => {}); |
|||
} else if (this.modalType == 1) { |
|||
// 编辑 |
|||
this.formData.attributeListPrice = JSON.stringify(this.formData.attributeListPrice) |
|||
this.formData.attributeList = Object.fromEntries(this.formData.attributeList1) |
|||
this.formData.attributeList = JSON.stringify(this.formData.attributeList) |
|||
this.formData.productPictures = [] |
|||
|
|||
this.NB.sendRequest("/app/product/edit", this.formData, false, 'post', 'application/json').then((res) => { |
|||
if(res.code == 200){ |
|||
that.tui.toast("操作成功"); |
|||
uni.navigateBack() |
|||
} |
|||
}).catch(() => {}); |
|||
} |
|||
// } |
|||
// }); |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
checkisMoreBuy(type){ |
|||
this.formData.isMoreBuy = type; |
|||
}, |
|||
checkSellTime(type){ |
|||
this.formData.sellTime = type; |
|||
}, |
|||
selectDateRange(e,type){ |
|||
if(type == 'start'){ |
|||
this.formData.sellBeginTime = e.detail.value |
|||
}else{ |
|||
this.formData.sellEndTime = e.detail.value |
|||
} |
|||
}, |
|||
guigeSubmit(){ |
|||
if(this.modalclassType == 'shuxing'){ |
|||
for(let i=0;i<this.attrValueArr.length;i++){ |
|||
if(this.formData.attributeList1.size == 0){ |
|||
//set has get |
|||
let data = { |
|||
title:[] |
|||
} |
|||
data.title.push(this.attrValueArr[i].title) |
|||
this.formData.attributeList1.set(this.attrValueArr[i].parentName,data) |
|||
}else{ |
|||
if(this.formData.attributeList1.has(this.attrValueArr[i].parentName) && this.formData.attributeList1.get(this.attrValueArr[i].parentName).title.indexOf(this.attrValueArr[i].title) == -1){ |
|||
this.formData.attributeList1.get(this.attrValueArr[i].parentName).title.push(this.attrValueArr[i].title) |
|||
}else{ |
|||
let data = { |
|||
title:[] |
|||
} |
|||
data.title.push(this.attrValueArr[i].title) |
|||
this.formData.attributeList1.set(this.attrValueArr[i].parentName,data) |
|||
} |
|||
} |
|||
} |
|||
}else{ |
|||
//guige |
|||
let message = [] |
|||
for(let i=0;i<this.specValueArr.length;i++){ |
|||
for(let m=0;m<this.formData.attributeListPrice.length;m++){ |
|||
if(this.specValueArr[i].id == this.formData.attributeListPrice[m].id){ |
|||
this.specValueArr[i].specPrice = this.formData.attributeListPrice[m].specPrice |
|||
this.specValueArr[i].specName = this.formData.attributeListPrice[m].specName |
|||
this.specValueArr[i].specNum = this.formData.attributeListPrice[m].specNum |
|||
} |
|||
} |
|||
message.push({ |
|||
id:this.specValueArr[i].id, |
|||
specName:this.specValueArr[i].specName == undefined ? this.specValueArr[i].title : this.specValueArr[i].specName, |
|||
specPrice:this.specValueArr[i].specPrice == undefined ? '' : this.specValueArr[i].specPrice, |
|||
specNum:this.specValueArr[i].specNum == undefined ? 9999 : this.specValueArr[i].specNum |
|||
}) |
|||
} |
|||
this.formData.attributeListPrice = message |
|||
} |
|||
this.$forceUpdate() |
|||
this.$refs.addTypeDialog.close() |
|||
}, |
|||
add() { |
|||
if (!this.selectNode.id) { |
|||
this.$Message.warning("请先选择一个分类"); |
|||
return; |
|||
} |
|||
this.modalType = 0; |
|||
this.$refs.form.resetFields(); |
|||
this.form.sort = this.data.length + 1; |
|||
this.formData = { |
|||
id:'', |
|||
shopId:'', |
|||
categoryId:'', //商品分类id |
|||
categoryName:'', //商品分类名称 |
|||
productPicture:'', //商品图标 |
|||
productName:'', //商品名称 |
|||
lunchBox:0, //餐盒 |
|||
startPayNum:'', //起售数量 |
|||
orderFiled:'',//排名 |
|||
attributeListPrice:[{ //商品规格 |
|||
specPrice:"", |
|||
specNum:9999 |
|||
}], |
|||
sellTime:0, //可售时间 |
|||
sellBeginTime:'', //可售时段自定义---开始时间 |
|||
sellEndTime:'', //可售时段自定义---结束时间 |
|||
attributeList:'', |
|||
productGroupBuyPrices:[], |
|||
attributeList1:new Map(), //商品属性 |
|||
productIntro:"" //详细图文 |
|||
} |
|||
this.specValueArr = [] |
|||
this.attrValueArr = [] |
|||
this.formData.shopId = this.shopId |
|||
this.formData.categoryId = this.selectNode.id |
|||
this.formData.categoryName = this.selectNode.categoryName |
|||
this.modalVisible = true; |
|||
}, |
|||
edit(v) { |
|||
this.modalType = 1; |
|||
// 转换null为"" |
|||
for (let attr in v) { |
|||
if (v[attr] == null) { |
|||
v[attr] = ""; |
|||
} |
|||
} |
|||
let str = JSON.stringify(v); |
|||
let data = JSON.parse(str); |
|||
console.log('111111',data) |
|||
this.formData = data; |
|||
this.formData.attributeList1 = JSON.parse(this.formData.attributeList) |
|||
this.formData.attributeList1 = new Map(Object.entries(this.formData.attributeList1)); |
|||
this.formData.attributeListPrice = JSON.parse(this.formData.attributeListPrice) |
|||
|
|||
this.formData.attributeList1.forEach((value, key) => { |
|||
for(let i = 0;i<value.title.length;i++){ |
|||
this.attrValueArr.push({ |
|||
parentName:key, |
|||
title:value.title[i] |
|||
}) |
|||
} |
|||
}); |
|||
this.specValueArr = this.formData.attributeListPrice |
|||
|
|||
|
|||
this.formData.sellTime = this.formData.sellBeginTime != '' ? 1 : 0 |
|||
this.modalVisible = true; |
|||
}, |
|||
checkSpecValue(index){ |
|||
this.categorySonData[index].checked = !this.categorySonData[index].checked |
|||
if(this.modalclassType == 'shuxing'){ |
|||
if(this.categorySonData[index].checked == true){ |
|||
this.categorySonData[index].parentName = this.typeToAttrName |
|||
this.attrValueArr.push(this.categorySonData[index]) |
|||
}else{ |
|||
for(let i=0;i<this.attrValueArr.length;i++){ |
|||
if(this.categorySonData[index].title == this.attrValueArr[i].title){ |
|||
this.attrValueArr.splice(i,1) |
|||
} |
|||
} |
|||
} |
|||
}else{ |
|||
//guige |
|||
if(this.categorySonData[index].checked == true){ |
|||
this.specValueArr.push(this.categorySonData[index]) |
|||
}else{ |
|||
for(let i=0;i<this.specValueArr.length;i++){ |
|||
if(this.categorySonData[index].id == this.specValueArr[i].id){ |
|||
this.specValueArr.splice(i,1) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
this.$forceUpdate() |
|||
}, |
|||
//点击左侧菜单切换 |
|||
clickLeftBtn(index) { |
|||
for (var i = 0; i < this.categoryData.length; i++) { |
|||
if (i == index) { |
|||
this.categoryData[i].parentId = true |
|||
} else { |
|||
this.categoryData[i].parentId = false |
|||
} |
|||
} |
|||
this.categoryIndex = index |
|||
this.typeToAttrName = this.categoryData[this.categoryIndex].title |
|||
this.getCateGorySon(this.categoryData[this.categoryIndex].id) |
|||
}, |
|||
pictureAdd(id, huan) { |
|||
let that = this |
|||
uni.chooseMedia({ |
|||
count: 9, |
|||
mediaType: ['image'], |
|||
sourceType: ['album', 'camera'], |
|||
success(res) { |
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}) |
|||
for (let i = 0; i < res.tempFiles.length; i++) { |
|||
that.upLoadFile(res.tempFiles[i].tempFilePath) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
checkSpec(type){ |
|||
this.$refs.addTypeDialog.open() |
|||
this.modalclassType = type |
|||
|
|||
this.NB.sendRequest("/dictData/getByCondition", { |
|||
name: "", |
|||
status: "", |
|||
pageNumber: 1, |
|||
pageSize: 100000, |
|||
sort: 'sortOrder', |
|||
order: 'asc', |
|||
dictId: '2026945661353725952' |
|||
}, false, 'GET', 'application/json').then((res) => { |
|||
if(res.code == 200){ |
|||
this.categoryData = res.result.content |
|||
for (var i = 0; i < this.categoryData.length; i++) { |
|||
if (i == this.categoryIndex) { |
|||
this.categoryData[i].parentId = true |
|||
} else { |
|||
this.categoryData[i].parentId = false |
|||
} |
|||
} |
|||
//如果是选择属性，需要拿一个分类名，保存成parent |
|||
this.typeToAttrName = res.result.content[this.categoryIndex].title |
|||
this.getCateGorySon(res.result.content[this.categoryIndex].id) |
|||
} |
|||
}).catch(() => {}); |
|||
}, |
|||
getCateGorySon(id){ |
|||
|
|||
this.NB.sendRequest("/dictData/getByCondition", { |
|||
name: "", |
|||
status: "", |
|||
pageNumber: 1, |
|||
pageSize: 100000, |
|||
sort: 'sortOrder', |
|||
order: 'asc', |
|||
dictId: id |
|||
}, false, 'GET', 'application/json').then((res) => { |
|||
if(res.code == 200){ |
|||
this.categorySonData = res.result.content |
|||
if(this.modalclassType == 'shuxing'){ |
|||
for (var i = 0; i < this.categorySonData.length; i++) { |
|||
if(this.attrValueArr.length>0){ |
|||
let index1 = false |
|||
for (var m = 0; m < this.attrValueArr.length; m++) { |
|||
if(this.attrValueArr[m].title == this.categorySonData[i].title){ |
|||
index1 = true |
|||
this.categorySonData[i].checked = true |
|||
} |
|||
} |
|||
if(index1){ |
|||
this.categorySonData[i].checked = true |
|||
} |
|||
}else{ |
|||
this.categorySonData[i].checked = false |
|||
} |
|||
} |
|||
}else{ |
|||
//guige |
|||
|
|||
|
|||
for (var i = 0; i < this.categorySonData.length; i++) { |
|||
if(this.specValueArr.length>0){ |
|||
for (var m = 0; m < this.specValueArr.length; m++) { |
|||
if(this.specValueArr[m].id == this.categorySonData[i].id){ |
|||
this.categorySonData[i].checked = true |
|||
} |
|||
} |
|||
}else{ |
|||
this.categorySonData[i].checked = false |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
}).catch(() => {}); |
|||
}, |
|||
deldantiaoguige(index){ |
|||
for (var m = 0; m < this.specValueArr.length; m++) { |
|||
if(this.specValueArr[m].id == this.formData.attributeListPrice[index].id){ |
|||
this.specValueArr.splice(m,1) |
|||
this.formData.attributeListPrice.splice(index,1) |
|||
console.log("11",this.formData.attributeListPrice) |
|||
if(this.formData.attributeListPrice.length == 1){ |
|||
this.formData.attributeListPrice = [] |
|||
this.formData.attributeListPrice.push({ |
|||
specName:"", |
|||
specPrice:'', |
|||
specNum:9999 |
|||
}) |
|||
this.specValueArr = [] |
|||
} |
|||
this.$forceUpdate() |
|||
return |
|||
} |
|||
} |
|||
}, |
|||
delGroup(index){ |
|||
this.formData.productGroupBuyPrices.splice(index,1) |
|||
}, |
|||
changePrice(index){ |
|||
this.specValueArr[index].specPrice = this.formData.attributeListPrice[index].specPrice |
|||
}, |
|||
changeCount(index){ |
|||
this.specValueArr[index].specNum = this.formData.attributeListPrice[index].specNum |
|||
}, |
|||
addGroup(){ |
|||
let data = { |
|||
groupCount:'', |
|||
groupPrice:0 |
|||
} |
|||
this.formData.productGroupBuyPrices.push(data) |
|||
}, |
|||
async upLoadFile(path) { |
|||
let that = this; |
|||
let hiver_token = uni.getStorageSync("hiver_token") |
|||
await uni.uploadFile({ |
|||
url: getApp().globalData.mainurl + '/upload/file', |
|||
filePath: path, |
|||
name: 'file', |
|||
header: { |
|||
"content-type": "multipart/form-data", |
|||
'accessToken': hiver_token |
|||
}, |
|||
formData: {}, |
|||
success: (uploadFileRes) => { |
|||
let pathData = JSON.parse(uploadFileRes.data) |
|||
that.formData.productPicture = pathData.result |
|||
that.$forceUpdate() |
|||
}, |
|||
fail: (err) => { |
|||
uni.hideLoading(); |
|||
uni.showToast({ |
|||
title: JSON.stringify(err), |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}); |
|||
await setTimeout(res => { |
|||
uni.hideLoading(); |
|||
}, 1000) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 13%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.formBox { |
|||
padding: 10px 13px; |
|||
border-radius: 7px; |
|||
box-shadow: 0 1px 10px 2px #e2e2e2; |
|||
background-color: #fff; |
|||
overflow: scroll; |
|||
height: 85%; |
|||
} |
|||
|
|||
.upload-img { |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
} |
|||
|
|||
button { |
|||
height: 90rpx; |
|||
line-height: 90rpx; |
|||
font-size: 36rpx; |
|||
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1)); |
|||
border-radius: 20rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
} |
|||
|
|||
.content-input { |
|||
width: auto; |
|||
position: relative; |
|||
overflow: hidden; |
|||
flex: 1; |
|||
line-height: 1; |
|||
font-size: 28rpx; |
|||
height: 70rpx; |
|||
border: 4rpx solid #eee; |
|||
padding-left: 20rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.add-popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 30rpx 30rpx 30rpx 0; |
|||
width: 600rpx; |
|||
height: 1050rpx; |
|||
background-color: #fff; |
|||
overflow: scroll; |
|||
border-radius: 20rpx; |
|||
} |
|||
.xiangxi-box{ |
|||
flex: 1; |
|||
border: 1px solid #eee; |
|||
border-radius: 20rpx; |
|||
} |
|||
.left-box { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
line-height: 100rpx; |
|||
border-bottom: 1px solid #fff; |
|||
} |
|||
|
|||
.left-box-hover { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
line-height: 50rpx; |
|||
border-bottom: 1px solid #fff; |
|||
background-color: #fff; |
|||
} |
|||
.content-left { |
|||
width: 160rpx; |
|||
background: #eee; |
|||
height: 900rpx; |
|||
overflow: scroll; |
|||
scrollbar-width: none; |
|||
} |
|||
.content-low{ |
|||
height: 60rpx; |
|||
padding: 0 10rpx; |
|||
border: 1px solid #eee; |
|||
display: inline-block; |
|||
margin: 10rpx; |
|||
font-weight: bold; |
|||
line-height: 60rpx; |
|||
} |
|||
.checked{ |
|||
background: #60F3FF; |
|||
color: #fff !important; |
|||
} |
|||
.uni-input{ |
|||
width: 200rpx; |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
border-radius: 10rpx; |
|||
border: 1px solid #eee; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,381 @@ |
|||
<template> |
|||
<!-- 分类管理 --> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
分类管理 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="card-list"> |
|||
<ul> |
|||
<li @tap="clickList(item)" v-for="(item, index) in indexList" :key="index" style="height: 100rpx;line-height: 100rpx;border-bottom: 1px solid #eee;overflow: hidden;"> |
|||
<view class="name"> |
|||
<text>{{item.categoryName}}</text> |
|||
</view> |
|||
<button class="bj-btn" @tap.stop="inputDialogToggle('edit', item)">编辑</button> |
|||
</li> |
|||
</ul> |
|||
</view> |
|||
<view style="width: 100%;position: fixed;bottom:0;background: #fff;z-index: 99;height: 172rpx;"> |
|||
<view class="add-btn" @tap="inputDialogToggle('add')">添加分类</view> |
|||
</view> |
|||
<!-- 添加分类弹出层 --> |
|||
<uni-popup ref="addTypeDialog" background-color="#fff"> |
|||
<view class="add-popup-content"> |
|||
<view class="add-popup-title"> |
|||
<text>新增分类</text> |
|||
<uni-icons @tap='close' type="closeempty" color='red' size="16" |
|||
style="height:40rpx;line-height: 40rpx;position: absolute !important;bottom:0;right: 30rpx;"></uni-icons> |
|||
</view> |
|||
<view class="add-popup-container"> |
|||
<input type="text" v-model="typeText" class="add-input" placeholder="请输入分类名称"> |
|||
<input type="text" v-model="sortText" class="add-input" placeholder="可设置分类排序"> |
|||
<view class="add-popup-bottom"> |
|||
<view class="add-popup-btn" @tap="dialogInputConfirm">确认</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
<!-- 编辑分类弹窗 --> |
|||
<uni-popup ref="delDialog" type="dialog"> |
|||
<view class="type-popup" |
|||
style="width:100%;margin-bottom: 0;border-radius: 0;height: 650rpx;border-radius: 20rpx;"> |
|||
<view style="height: 120rpx;font-size: 36rpx;font-weight: bold;line-height: 120rpx;text-align: center;"> |
|||
编辑分类 |
|||
</view> |
|||
<view style="height: 80rpx;font-size: 28rpx;line-height: 80rpx;text-align: center;"> |
|||
请在下方输入框中输入分类名 |
|||
</view> |
|||
<view style="width: 90%;margin: 40rpx auto 0;"> |
|||
分类名称： |
|||
<uni-easyinput type="text" v-model="inputVal" placeholder="请输入规格值" /> |
|||
</view> |
|||
<view style="width: 90%;margin: 40rpx auto 0;"> |
|||
排序：<uni-easyinput type="text" v-model="sortTextEdit" placeholder="可设置排序" /> |
|||
</view> |
|||
<view |
|||
style="width: 100%;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 0;color: #fff;display: flex;position: absolute;bottom: 0;"> |
|||
<view style="flex: 1;background: linear-gradient(90deg, #60F3FF, #088FEB);" @tap="delItem">删除 |
|||
</view> |
|||
<view style="flex: 1;background: linear-gradient(90deg, #FF9797, #FFC1E0);" |
|||
@tap="dialogInputConfirm">确认</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
show: false, |
|||
indexList: [], |
|||
inputVal: '', |
|||
multipleList:[], |
|||
sortText:'', |
|||
sortTextEdit:'', |
|||
typeText:'', |
|||
editItem: {}, |
|||
delItems: {}, |
|||
} |
|||
}, |
|||
filters: { |
|||
|
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onLoad(option) { |
|||
this.getGategoryList() |
|||
}, |
|||
methods: { |
|||
close(){ |
|||
this.$refs.addTypeDialog.close() |
|||
}, |
|||
//初始化获取分类列表 |
|||
getGategoryList() { |
|||
this.NB.sendRequest("/app/productCategory/list", { |
|||
shopId:uni.getStorageSync('shopId') |
|||
}, false, 'get', 'application/json').then((res) => { |
|||
if (res.code == 200) { |
|||
this.indexList = res.result; |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch(() => {}); |
|||
}, |
|||
delItem(item, type) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确定删除该分类吗？', |
|||
success: function (res) { |
|||
if (res.confirm) { |
|||
this.delItemModal() |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
delItemModal() { |
|||
this.NB.sendRequest("/app/productCategory/delById", { |
|||
id: this.editItem.id, |
|||
}, false, 'POST', 'application/x-www-form-urlencoded').then((res) => { |
|||
if (res.code == 200) { |
|||
this.getGategoryList() |
|||
uni.showToast({ |
|||
title: "删除成功", |
|||
icon: 'none' |
|||
}) |
|||
this.$refs.carPopup.close() |
|||
this.$refs.delDialog.close() |
|||
|
|||
} else { |
|||
uni.showToast({ |
|||
title: "删除失败", |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}).catch(() => {}); |
|||
}, |
|||
//分类编辑（新增，修改） |
|||
dialogInputConfirm() { |
|||
let that = this; |
|||
switch (that.typeModel) { |
|||
case 'add': |
|||
for (let i = 0; i < that.indexList.length; i++) { |
|||
if (that.indexList[i].categoryName == that.typeText) { |
|||
uni.showToast({ |
|||
title: "请勿重复添加！", |
|||
icon: 'error' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
if(that.typeText == ''){ |
|||
that.tui.toast("请输入分类名") |
|||
return |
|||
} |
|||
|
|||
|
|||
|
|||
this.NB.sendRequest("/app/productCategory/save", { |
|||
categoryName: that.typeText, |
|||
sort: that.sortText, |
|||
productAttributeOfAddVos:that.multipleList, |
|||
shopId:uni.getStorageSync('shopId') |
|||
}, false, 'POST', 'application/x-www-form-urlencoded').then((res) => { |
|||
if (res.code == 200) { |
|||
that.tui.toast("添加成功") |
|||
that.$refs.addTypeDialog.close() |
|||
that.sortText = '' |
|||
|
|||
that.getGategoryList() |
|||
} else { |
|||
that.tui.toast("添加失败") |
|||
} |
|||
}).catch(() => {}); |
|||
|
|||
that.typeText = '' |
|||
that.inputVal = '' |
|||
that.multipleList = [] |
|||
break; |
|||
case 'edit': |
|||
this.NB.sendRequest("/app/productCategory/edit", { |
|||
categoryName: this.inputVal, |
|||
sort: that.sortTextEdit, |
|||
id: that.editItem.id, |
|||
shopId:uni.getStorageSync('shopId') |
|||
}, false, 'POST', 'application/x-www-form-urlencoded').then((res) => { |
|||
if (res.code == 200) { |
|||
that.getGategoryList() |
|||
that.sortText = '' |
|||
uni.showToast({ |
|||
title: "修改成功", |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: "修改失败", |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}).catch(() => {}); |
|||
break; |
|||
default: |
|||
} |
|||
that.$refs.delDialog.close() |
|||
this.inputVal = "" |
|||
this.$forceUpdate() |
|||
}, |
|||
//判断需要打开哪个弹窗（删除弹窗、取消弹窗） |
|||
inputDialogToggle(type, item, parent) { |
|||
this.typeModel = type; |
|||
if (type == 'edit') { |
|||
this.inputVal = item.categoryName; |
|||
this.editItem = item; |
|||
this.sortTextEdit = (this.editItem.sort == null || this.editItem.sort == 'null') ? '' : this.editItem |
|||
.sort |
|||
this.$refs.delDialog.open('bottom') |
|||
} else if (type == 'add') { |
|||
this.inputVal = ''; |
|||
this.isOpenId = item; |
|||
this.dialogTit = '输入分类名' |
|||
this.$refs.addTypeDialog.open('bottom') |
|||
} |
|||
|
|||
}, |
|||
//点击选择列表，带参数 返回上一页 |
|||
clickList(item) { |
|||
let pages = getCurrentPages(); |
|||
let prevPage = pages[pages.length - 2]; |
|||
prevPage.$vm.typeItem = item |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.card-list { |
|||
width: 95%; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
height: auto; |
|||
margin: -120rpx auto; |
|||
} |
|||
|
|||
.name { |
|||
width: 75%; |
|||
float: left; |
|||
display: flex; |
|||
} |
|||
|
|||
.bj-btn { |
|||
width: 88rpx; |
|||
height: 50rpx; |
|||
font-size: 24rpx; |
|||
padding: 0; |
|||
line-height: 50rpx; |
|||
border-radius: 50rpx; |
|||
border: none; |
|||
} |
|||
|
|||
.type-popup { |
|||
width: 500rpx; |
|||
height: auto; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
position: relative; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.add-btn { |
|||
width: 95%; |
|||
height: 100rpx; |
|||
margin: 20rpx auto 0; |
|||
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1)); |
|||
font-size: 32rpx; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
line-height: 100rpx; |
|||
border-radius: 100rpx; |
|||
} |
|||
|
|||
.add-popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
// padding: 30rpx; |
|||
width: 100%; |
|||
height: 400rpx; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.add-popup-title { |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
position: relative; |
|||
width: 95%; |
|||
margin: 20rpx auto 0; |
|||
} |
|||
|
|||
.add-popup-container { |
|||
width: 95%; |
|||
margin: 20rpx auto 0; |
|||
} |
|||
|
|||
.add-popup-bottom { |
|||
display: flex; |
|||
height: 80rpx; |
|||
color: #fff; |
|||
line-height: 80rpx; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.add-popup-btn { |
|||
flex: 1; |
|||
text-align: center; |
|||
background: rgba(0, 35, 28, 1); |
|||
border-radius: 80rpx; |
|||
color: rgba(166, 255, 234, 1); |
|||
} |
|||
.add-input{ |
|||
width: 95%; |
|||
border: 1px solid #eee; |
|||
height: 80rpx; |
|||
padding-left: 20rpx; |
|||
margin:20rpx auto 0; |
|||
font-size: 25rpx; |
|||
line-height: 80rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,333 @@ |
|||
<template> |
|||
<!-- 商家数据统计 --> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
数据统计 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="margin-top: -120rpx;"> |
|||
<uni-datetime-picker style="margin-bottom:20rpx;" v-model="range" type="daterange" @change="searchList" /> |
|||
</view> |
|||
<view style="width: 100%;margin: 20rpx auto;background: #fff;"> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="cart" size="24" color="red"></uni-icons> |
|||
</view> |
|||
销售金额 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalAmount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="cart" size="24" color="red"></uni-icons> |
|||
</view> |
|||
销量 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalJCount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="wallet" size="24" color="red"></uni-icons> |
|||
</view> |
|||
销售利润 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalProfit==null?0:shopInfo.totalProfit}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="refreshempty" size="24" color="red"></uni-icons> |
|||
</view> |
|||
退货金额 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.returnTotalAmount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="refreshempty" size="24" color="red"></uni-icons> |
|||
</view> |
|||
退货数 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.returnTotalCount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<view style="width: 100%;height: 10rpx;background: #eee;"></view> |
|||
|
|||
<view class="box"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="staff" size="24" color="red"></uni-icons> |
|||
</view> |
|||
下单客户 |
|||
</view> |
|||
<view style="width: 30%;text-align: right;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;">{{shopInfo.totalCCount}}</text> |
|||
|
|||
</view> |
|||
</view> |
|||
<!-- <view class="box" @tap="goDetail('rexiao')"> |
|||
<view style="width: 69%;"> |
|||
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;"> |
|||
<uni-icons type="fire" size="24" color="red"></uni-icons> |
|||
</view> |
|||
热销商品 |
|||
</view> |
|||
<view style="width: 30%;"> |
|||
<text style="display: inline-block;width: 150rpx;text-align: center;"></text> |
|||
<uni-icons type="right" size="24" color="#777"></uni-icons> |
|||
</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
range:[], |
|||
shopInfo:{ |
|||
totalProfit:0, |
|||
returnTotalAmount:0, |
|||
saleReturnCost:0 |
|||
} |
|||
}; |
|||
}, |
|||
onShow(){ |
|||
if(this.range ==''){ |
|||
this.getMonth(); |
|||
} |
|||
this.getSaleInfo(); |
|||
}, |
|||
methods: { |
|||
getSaleInfo() { |
|||
this.shopInfo = { |
|||
totalProfit:0, |
|||
returnTotalAmount:0, |
|||
saleReturnCost:0 |
|||
} |
|||
|
|||
this.NB.sendRequest("/app/sale/getShopAll", { |
|||
pageVo: { |
|||
pageSize: 5, |
|||
pageNumber: 1 |
|||
}, |
|||
shopId:uni.getStorageSync('shopId'), |
|||
startTime:this.range[0], |
|||
endTime:this.range[1] |
|||
}, false, 'POST', 'application/json').then((res) => { |
|||
if (res.code == 200) { |
|||
this.shopInfo = res.result |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
//获取当月1日到当前时间 |
|||
getMonth() { |
|||
let date = new Date() |
|||
let year = date.getFullYear().toString() //'年' |
|||
let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString() //'月' |
|||
let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString() //'日' |
|||
let end = year + '-' + month + '-' + da //当天 |
|||
let beg = year + '-' + month + '-01' //当月第一天 |
|||
this.range = [beg,end] |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
searchList() { |
|||
this.priceList = []; |
|||
this.getSaleInfo() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
.contentPadding { |
|||
padding: 28rpx 20rpx; |
|||
background-color: #fff; |
|||
color: #909399; |
|||
|
|||
.title { |
|||
padding-left: 20rpx; |
|||
font-size: 32rpx; |
|||
color: #303133; |
|||
margin-bottom: 26rpx; |
|||
line-height: 66rpx; |
|||
|
|||
image { |
|||
display: inline-block; |
|||
width: 40rpx; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.btn { |
|||
text-align: right; |
|||
width: 24%; |
|||
float: right; |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
.grid-text { |
|||
font-size: 28rpx; |
|||
margin-bottom: 26rpx; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.u-grid-item { |
|||
width: 30% !important; |
|||
height: 160rpx; |
|||
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
margin-left: 3%; |
|||
border-radius: 30rpx; |
|||
margin-top: 20rpx !important; |
|||
color: #fff !important; |
|||
|
|||
} |
|||
.cardText { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.priceText { |
|||
font-size: 28rpx; |
|||
} |
|||
.u-grid-item:nth-child(2) { |
|||
background: linear-gradient(#FFBB77, #FFDCB9) !important; |
|||
} |
|||
|
|||
.u-grid-item:nth-child(3) { |
|||
background: linear-gradient(#1AFD9C, #7AFEC6) !important; |
|||
} |
|||
|
|||
.u-grid-item:nth-child(4) { |
|||
background: linear-gradient(#1AFD9C, #7AFEC6) !important; |
|||
} |
|||
.u-grid-item:nth-child(5) { |
|||
background: linear-gradient(#FFBB77, #FFDCB9) !important; |
|||
} |
|||
.u-grid-item:nth-child(6) { |
|||
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
} |
|||
.u-count-num { |
|||
color: #FFF !important; |
|||
text-align:center; |
|||
} |
|||
.uni-date{ |
|||
background: #fff; |
|||
} |
|||
.uni-tooltip-popup{ |
|||
width: 180rpx; |
|||
} |
|||
.u-icon{ |
|||
padding: 0 0 0 16rpx !important; |
|||
} |
|||
.u-zidingyi{ |
|||
width: 22% !important; |
|||
height: 160rpx; |
|||
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
margin-left: 3%; |
|||
border-radius: 30rpx; |
|||
margin-top: 20rpx !important; |
|||
color: #fff !important; |
|||
text-align: center; |
|||
padding-top: 20rpx; |
|||
} |
|||
.u-zidingyi:nth-child(2) { |
|||
background: linear-gradient(#FFBB77, #C4E1FF) !important; |
|||
} |
|||
.u-zidingyi:nth-child(3) { |
|||
background: linear-gradient(#84C1FF, #7AFEC6) !important; |
|||
} |
|||
.u-zidingyi:nth-child(4) { |
|||
background: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
} |
|||
.box{ |
|||
width: 100%; |
|||
height: 100rpx; |
|||
padding-left: 20rpx; |
|||
display: flex; |
|||
line-height: 100rpx; |
|||
font-size: 34rpx; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
.tan-lirun{ |
|||
margin-top: 20rpx; |
|||
width: 45%; |
|||
height: 120rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
float: left; |
|||
background-image: linear-gradient(#84C1FF, #C4E1FF) !important; |
|||
color: #fff; |
|||
border-radius: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,570 @@ |
|||
<template> |
|||
<!-- 商品列表 --> |
|||
<view class="page1"> |
|||
<view class="title" style="z-index: 81;"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-search" @tap="goDetail('search')"> |
|||
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons> |
|||
<input type="text" placeholder="搜索" @input="search" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="width: 100%;display: flex;height: 100%;padding-bottom: 60rpx;padding-top: 28%;position: fixed;top: 0;z-index:80;"> |
|||
<view class="content-left"> |
|||
<view class="left-box" v-for="(item, index) in indexList" :key="index" |
|||
:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)"> |
|||
<text style="width: 100%;height: 90rpx;line-height: 90rpx;display: inline-block;overflow: hidden;" |
|||
:class="item.parentId ? 'red' :''">{{item.categoryName}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="content-right" style="padding-bottom: 140rpx;margin-bottom: 200rpx;"> |
|||
<view class="right-box" v-for="(item,index) in shopList" :key="index"> |
|||
<view style="position: relative;display: flex;"> |
|||
<view class="box-left" @tap="largeImg(item)"> |
|||
<view v-if="(item.buyCountNew!= null && item.buyCountNew!= undefined)" style="position: absolute;left: 110rpx;color: #fff;background: red;width: 45rpx;height: 40rpx;font-size: 28rpx;text-align: center;line-height: 40rpx;border-radius: 10rpx;"> |
|||
{{item.buyCountNew}} |
|||
</view> |
|||
<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture"> |
|||
<view class="noPic" v-else>暂无图片</view> |
|||
</view> |
|||
<view class="box-right"> |
|||
<view class="box-right-name"> |
|||
{{item.productName == null ?'':item.productName}} |
|||
<text style="color: red;" v-if="item.delFlag == 0">(已下架)</text> |
|||
</view> |
|||
<view class="box-right-num"></view> |
|||
<view class="box-right-price"> |
|||
<view class="price-box"> |
|||
<text>{{item.lunchBox}}</text> |
|||
<text>餐盒费</text> |
|||
</view> |
|||
<view class="price-box"> |
|||
<text>{{item.startPayNum}}</text> |
|||
<text>起售数量</text> |
|||
</view> |
|||
<view class="price-box" @tap="changeShow(index,'shopList')" style="flex: 1;text-align: right;padding-top: 26rpx;"> |
|||
<uni-icons type="down" size="18"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="show-box" v-show="item.isShow"> |
|||
<view class="show-text" @tap="goDetail('goods',item)" style="border-right: 1px solid #fff;"> |
|||
<uni-icons type="compose" size="18"></uni-icons> |
|||
编辑 |
|||
</view> |
|||
<view class="show-text" @tap="isPush('shopList',index,item,item.isPush==1?0:1)" style="border-right: 1px solid #fff;"> |
|||
<uni-icons type="hand-up" size="18"></uni-icons> |
|||
{{item.isPush == 0?'设为推荐':'取消推荐'}} |
|||
</view> |
|||
<view class="show-text" @tap="isMust('shopList',index,item,item.isMust==1?0:1)" style="border-right: 1px solid #fff;"> |
|||
<uni-icons type="star" size="18"></uni-icons> |
|||
{{item.isMust == 0?'设为必点':'取消必点'}} |
|||
</view> |
|||
<view class="show-text" @tap="upDown('shopList',index,item,item.delFlag==1?0:1)" style="border-right: 1px solid #fff;"> |
|||
<uni-icons type="upload" size="18"></uni-icons> |
|||
{{item.delFlag == 1?'下架':'上架'}} |
|||
</view> |
|||
<view class="show-text" @tap="remove(item)"> |
|||
<uni-icons type="trash" size="18"></uni-icons> |
|||
删除 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="right-box" v-for="(item,index) in shopList1" :key="index"> |
|||
<view style="position: relative;display: flex;"> |
|||
<view class="box-left" @tap="largeImg(item)"> |
|||
<view v-if="(item.buyCountNew!= null && item.buyCountNew!= undefined)" style="position: absolute;left: 110rpx;color: #fff;background: red;width: 45rpx;height: 40rpx;font-size: 28rpx;text-align: center;line-height: 40rpx;border-radius: 10rpx;"> |
|||
{{item.buyCountNew}} |
|||
</view> |
|||
<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture"> |
|||
<view class="noPic" v-else>暂无图片</view> |
|||
</view> |
|||
<view class="box-right"> |
|||
<view class="box-right-name"> |
|||
{{item.productName == null ?'':item.productName}} |
|||
</view> |
|||
<view class="box-right-num"></view> |
|||
<view class="box-right-price"> |
|||
<view class="price-box"> |
|||
<text>{{item.lunchBox}}</text> |
|||
<text>餐盒费</text> |
|||
</view> |
|||
<view class="price-box"> |
|||
<text>{{item.startPayNum}}</text> |
|||
<text>起售数量</text> |
|||
</view> |
|||
<view class="price-box" @tap="changeShow(index,'shopList1')" style="flex: 1;text-align: right;padding-top: 26rpx;"> |
|||
<uni-icons type="down" size="18"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="show-box" v-show="item.isShow"> |
|||
<view class="show-text" @tap="goDetail('goods',item)" style="border-right: 1px solid #fff;"> |
|||
编辑 |
|||
</view> |
|||
<view class="show-text" @tap="isPush('shopList1',index,item,item.isPush==1?0:1)" style="border-right: 1px solid #fff;"> |
|||
<uni-icons type="hand-up" size="18"></uni-icons> |
|||
{{item.isPush == 0?'设为推荐':'取消推荐'}} |
|||
</view> |
|||
<view class="show-text" @tap="isMust('shopList1',index,item,item.isMust==1?0:1)" style="border-right: 1px solid #fff;"> |
|||
<uni-icons type="star" size="18"></uni-icons> |
|||
{{item.isMust == 0?'设为必点':'取消必点'}} |
|||
</view> |
|||
<view class="show-text" @tap="upDown('shopList1',index,item,item.delFlag==1?0:1)" style="border-right: 1px solid #fff;"> |
|||
<uni-icons type="upload" size="18"></uni-icons> |
|||
{{item.delFlag == 1?'下架':'上架'}} |
|||
</view> |
|||
<view class="show-text" @tap="remove(item)" style="border-right: 1px solid #fff;"> |
|||
<uni-icons type="trash" size="18"></uni-icons> |
|||
删除 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="bottom-box"> |
|||
<view class="bottom-btn" @tap="goDetail('goods')" style="background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);">新增商品</view> |
|||
<view class="bottom-btn" @tap="goDetail('type')">新增分类</view> |
|||
</view> |
|||
<u-loadmore :status="status" /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
indexList: [], |
|||
shopList: [], |
|||
shopList1: [], |
|||
pageNum: 1, |
|||
searchName: '', |
|||
shopId:'', |
|||
categoryId: '', |
|||
} |
|||
}, |
|||
filters: { |
|||
|
|||
}, |
|||
onShow() { |
|||
this.getGategoryList() |
|||
}, |
|||
onLoad(option) { |
|||
this.shopId = uni.getStorageSync('shopId') |
|||
|
|||
}, |
|||
onReachBottom() { |
|||
if (this.pageNum >= this.pages) return; |
|||
// this.status = 'loading'; |
|||
this.pageNum++; |
|||
if(this.gateType == 'search'){ |
|||
this.getShareList('search'); |
|||
}else{ |
|||
this.getShareList(); |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
//顶部搜索框 |
|||
search(e) { |
|||
this.pageNum = 1 |
|||
this.shopList1 = [] |
|||
this.shopList = [] |
|||
if (e == '') { |
|||
this.searchName = "" |
|||
this.getShareList() |
|||
} else { |
|||
this.searchName = e |
|||
this.getShareList('search') |
|||
|
|||
} |
|||
}, |
|||
changeShow(index,type){ |
|||
console.log("1111",index) |
|||
console.log("1111",type) |
|||
if(type == 'shopList'){ |
|||
this.shopList[index].isShow = !this.shopList[index].isShow |
|||
console.log(this.shopList[index]) |
|||
}else{ |
|||
this.shopList1[index].isShow = !this.shopList1[index].isShow |
|||
console.log(this.shopList1[index]) |
|||
} |
|||
this.$forceUpdate() |
|||
}, |
|||
isPush(type,index,item,value) { |
|||
this.NB.sendRequest("/app/product/isPush", { |
|||
id: item.id, |
|||
isPush:value |
|||
}, false, 'POST', 'application/x-www-form-urlencoded').then((res) => { |
|||
if (res.code == 200) { |
|||
if(type == 'shopList'){ |
|||
this.shopList[index].isPush = value |
|||
}else{ |
|||
this.shopList1[index].isPush = value |
|||
} |
|||
this.tui.toast('设置成功') |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
remove(v) { |
|||
let that = this; |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '确定要删除该商品吗？', |
|||
success: function (res) { |
|||
if (res.confirm) { |
|||
|
|||
that.NB.sendRequest("/app/product/delById", { |
|||
id: v.id |
|||
}, false, 'POST', 'application/x-www-form-urlencoded').then((res) => { |
|||
if (res.code == 200) { |
|||
that.getShareList() |
|||
that.tui.toast('删除成功') |
|||
} else { |
|||
that.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
isMust(type,index,item,value) { |
|||
|
|||
this.NB.sendRequest("/app/product/isMust", { |
|||
id: item.id, |
|||
isMust:value |
|||
}, false, 'POST', 'application/x-www-form-urlencoded').then((res) => { |
|||
if (res.code == 200) { |
|||
if(type == 'shopList'){ |
|||
this.shopList[index].isMust = value |
|||
}else{ |
|||
this.shopList1[index].isMust = value |
|||
} |
|||
this.tui.toast('设置成功') |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
upDown(type,index,item,value) { |
|||
if(value == 0){ |
|||
|
|||
|
|||
this.NB.sendRequest("/app/product/down", { |
|||
id: item.id |
|||
}, false, 'POST', 'application/x-www-form-urlencoded').then((res) => { |
|||
if (res.code == 200) { |
|||
if(type == 'shopList'){ |
|||
this.shopList[index].delFlag = value |
|||
}else{ |
|||
this.shopList1[index].delFlag = value |
|||
} |
|||
this.tui.toast('设置成功') |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}else{ |
|||
|
|||
|
|||
this.NB.sendRequest("/app/product/up", { |
|||
id: item.id |
|||
}, false, 'POST', 'application/x-www-form-urlencoded').then((res) => { |
|||
if (res.code == 200) { |
|||
if(type == 'shopList'){ |
|||
this.shopList[index].delFlag = value |
|||
}else{ |
|||
this.shopList1[index].delFlag = value |
|||
} |
|||
this.tui.toast('设置成功') |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
} |
|||
|
|||
}, |
|||
goDetail(type,item){ |
|||
let url="" |
|||
if(type == 'goods'){ |
|||
url = '/pages/shop/addGoods?dataList='+ JSON.stringify(item) |
|||
}else{ |
|||
url = '/pages/shop/addType' |
|||
} |
|||
uni.navigateTo({ |
|||
url:url |
|||
}) |
|||
}, |
|||
//点击分类获取商品列表 |
|||
getShareList(type) { |
|||
let data = {} |
|||
if (type == 'search') { |
|||
this.gateType = 'search' |
|||
data = { |
|||
categoryId: "", |
|||
searchStr: this.searchName, |
|||
pageNum: this.pageNum, |
|||
pageSize: '10' |
|||
} |
|||
} else { |
|||
this.gateType = '' |
|||
data = { |
|||
categoryId: this.categoryId, |
|||
searchStr: this.searchName, |
|||
pageNum: this.pageNum, |
|||
pageSize: '10' |
|||
} |
|||
} |
|||
let that = this |
|||
|
|||
|
|||
this.NB.sendRequest("/app/product/getShareList", data, false, 'POST', 'application/json').then((res) => { |
|||
if (res.code == 200) { |
|||
if (type == 'search') { |
|||
this.shopList = [] |
|||
this.status = 'nomore'; |
|||
if (this.pages == 1) { |
|||
this.shopList1 = res.result.records |
|||
} else { |
|||
this.shopList1 = [...this.shopList1, ...res.result.records] |
|||
} |
|||
for(let i=0;i<this.shopList1.length;i++){ |
|||
this.shopList1[i].isShow = false |
|||
} |
|||
this.pages = res.result.pages |
|||
} else { |
|||
this.shopList1 = [] |
|||
this.status = 'nomore'; |
|||
if (this.pages == 1) { |
|||
this.shopList = res.result.records |
|||
} else { |
|||
this.shopList = [...this.shopList, ...res.result.records] |
|||
} |
|||
for(let i=0;i<this.shopList.length;i++){ |
|||
this.shopList[i].isShow = false |
|||
} |
|||
this.pages = res.result.pages |
|||
} |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
//点击左侧菜单切换 |
|||
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.categoryId = this.indexList[index].id |
|||
this.pageNum = 1 |
|||
this.searchName = "" |
|||
this.shopList1 = [] |
|||
this.shopList = [] |
|||
this.getShareList() |
|||
}, |
|||
//初始化获取分类列表 |
|||
getGategoryList() { |
|||
|
|||
|
|||
this.NB.sendRequest("/app/productCategory/list", { |
|||
shopId:this.shopId |
|||
}, false, 'get', 'application/json').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.categoryId = this.indexList[0].id |
|||
this.getShareList(); |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
|
|||
} |
|||
.title{ |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 13%; |
|||
position: fixed; |
|||
top: 0; |
|||
} |
|||
.title-sreach{ |
|||
width: 75%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
} |
|||
.back-btn{ |
|||
padding-top: 110rpx; |
|||
} |
|||
.title-search{ |
|||
margin-top: 110rpx; |
|||
display: flex; |
|||
background: #fff; |
|||
height: 54rpx; |
|||
margin-left: 20rpx; |
|||
border-radius: 54rpx; |
|||
flex: 1; |
|||
input{ |
|||
height: 54rpx; |
|||
line-height: 54rpx; |
|||
} |
|||
} |
|||
.content-left { |
|||
width: 170rpx; |
|||
background: #eee; |
|||
overflow: scroll; |
|||
} |
|||
.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: 6rpx solid red; |
|||
} |
|||
.content-right { |
|||
flex: 1; |
|||
overflow-y: scroll; |
|||
height: 100%; |
|||
background: #fff; |
|||
} |
|||
|
|||
.right-box { |
|||
width: 100%; |
|||
height: auto; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
.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; |
|||
flex: 1; |
|||
} |
|||
|
|||
.box-right-name { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.box-right-num { |
|||
padding: 5rpx 0; |
|||
color: #777; |
|||
text-align: right; |
|||
padding-right: 20rpx; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
.box-right-price { |
|||
display: flex; |
|||
font-size: 25rpx; |
|||
text-align: center; |
|||
} |
|||
.price-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.price-box text:first-child { |
|||
color: #ffa200 |
|||
} |
|||
.bottom-box { |
|||
width: 100%; |
|||
height: 140rpx; |
|||
display: flex; |
|||
background: #fff; |
|||
z-index: 98; |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
padding-top: 20rpx; |
|||
} |
|||
|
|||
.bottom-btn { |
|||
width: 50%; |
|||
height: 90rpx; |
|||
line-height: 90rpx; |
|||
border-radius: 90rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1)); |
|||
text-align: center; |
|||
margin: 0 20rpx; |
|||
} |
|||
.show-box{ |
|||
display: flex; |
|||
height: 100rpx; |
|||
background: #eee; |
|||
} |
|||
.show-text{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
flex: 1; |
|||
padding-top: 14rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,271 @@ |
|||
<template> |
|||
<!-- 商家订单详情 --> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
订单详情 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="box1" style="display: flex;font-size: 14px;font-weight: 700;"> |
|||
<text>{{'#'+data.numberCode}}</text> |
|||
<text style="margin: 0 10px;">期望送达</text> |
|||
<text>明天 06:30</text> |
|||
<text style="flex: 1;text-align: right;color: red;"> |
|||
{{data.status == 0?'待支付':data.status == 1?' 待成团':data.status == 2?'待消费':data.status == 3?'待接单':data.status == 4?'待取货':data.status == 5?'待送达':data.status == 6?'已完成':data.status == 7?'待退款':data.status == 8?'已退款':data.status == 9?'已取消':data.status == 11?'售后中':data.status == 12?'已售后':""}} |
|||
</text> |
|||
</view> |
|||
<view class="box1" style="display: flex;height: 50px;line-height: 50px;padding: 0 10px;"> |
|||
<view style="border: 1px solid #48D1CC;height: 25px;line-height: 25px;padding: 0 10px;border-radius: 10px;margin-top: auto;margin-bottom: auto;color: #48D1CC;font-weight: 700;"> |
|||
{{data.deliveryType == 2?'自取订单':'配送订单'}} |
|||
</view> |
|||
<view v-if="data.deliveryType == 1" style="display: flex;flex: 1;padding-left: 10px;"> |
|||
<text style="flex: 1;">配送员：{{data.deliveryInfo.workerName}}</text> |
|||
<view class=""> |
|||
<img @tap="makeCall(data.deliveryInfo.workerPhone)" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 30px;height: 30px;margin-top: 10px;" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="box1" v-if="data.deliveryType == 1" style="display: flex;"> |
|||
<view style="flex: 1;"> |
|||
<view style="font-weight: 700;height: 25px;"> |
|||
收货人：{{data.deliveryInfo.receiverName}} |
|||
</view> |
|||
<view style="color: #777;height: 35px;"> |
|||
{{data.deliveryInfo.receiverAddress}} |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<img @tap="makeCall(data.deliveryInfo.receiverPhone)" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt="" style="width: 30px;height: 30px;margin-top: 14px;" /> |
|||
</view> |
|||
</view> |
|||
<view class="box1"> |
|||
<view style="border-bottom: 1px solid #eee;padding-bottom: 10px;"> |
|||
<view style="font-size: 16px;height: 30px;"> |
|||
商品 <text style="font-size: 14px;color: #777;">共{{data.goodsNum}}件</text> |
|||
</view> |
|||
<view v-for="(item,index) in data.goodsList" :key="index" style="display: flex;height: 20px;line-height: 20px;"> |
|||
<view style="flex: 1;"> |
|||
{{item.productName}} |
|||
</view> |
|||
<view style="width: 30px;"> |
|||
{{'x'+ item.quantity}} |
|||
</view> |
|||
<view style="width: 50px;text-align: right;"> |
|||
{{'￥'+ item.price}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view style="display: flex;height: 30px;line-height: 30px;"> |
|||
<view style="flex: 1;"> |
|||
商品金额 |
|||
</view> |
|||
<view class=""> |
|||
{{'￥' + data.goodsAmount}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;height: 30px;line-height: 30px;"> |
|||
<view style="flex: 1;"> |
|||
配送费 |
|||
</view> |
|||
<view class=""> |
|||
{{'￥' + data.deliveryFee}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;height: 30px;line-height: 30px;"> |
|||
<view style="flex: 1;"> |
|||
客户实际支付 |
|||
</view> |
|||
<view class=""> |
|||
{{'￥'+ data.totalAmount}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;height: 30px;line-height: 30px;"> |
|||
<view style="flex: 1;"> |
|||
平台服务费 |
|||
</view> |
|||
<view class=""> |
|||
￥12.00假的 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="box1"> |
|||
<view class=""> |
|||
<view style="display: flex;height: 30px;line-height: 30px;"> |
|||
<view style="width: 70px;"> |
|||
订单编号 |
|||
</view> |
|||
<view style="flex: 1;text-align: right;"> |
|||
{{data.id}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;height: 30px;line-height: 30px;"> |
|||
<view style="width: 70px;"> |
|||
下单时间 |
|||
</view> |
|||
<view style="flex: 1;text-align: right;"> |
|||
{{data.createTime | formatISOTime}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;height: 30px;line-height: 30px;"> |
|||
<view style="width: 70px;"> |
|||
用户账号 |
|||
</view> |
|||
<view style="flex: 1;text-align: right;"> |
|||
13521030111假的 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="box1 bottom"> |
|||
<view style="height: 30px;line-height: 30px;display: flex;border-bottom: 1px solid #eee;font-size: 14px;"> |
|||
<view style="flex: 1;"> |
|||
预计收入 |
|||
</view> |
|||
<view style="color: red;font-weight: 700;"> |
|||
￥10.32假的 |
|||
</view> |
|||
</view> |
|||
<view style="margin-top: 10px;"> |
|||
<view class="btn"> |
|||
打印小票 |
|||
</view> |
|||
<view class="btn" style="background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);"> |
|||
取消订单 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
data:{} |
|||
} |
|||
}, |
|||
filters:{ |
|||
formatISOTime(isoString) { |
|||
const date = new Date(isoString); |
|||
const year = date.getFullYear(); |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
|||
const day = date.getDate().toString().padStart(2, '0'); |
|||
const hours = date.getHours().toString().padStart(2, '0'); |
|||
const minutes = date.getMinutes().toString().padStart(2, '0'); |
|||
const seconds = date.getSeconds().toString().padStart(2, '0'); |
|||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onLoad(option) { |
|||
this.shopId = option.id |
|||
this.getDetail() |
|||
}, |
|||
methods: { |
|||
getDetail(){ |
|||
let that = this |
|||
this.NB.sendRequest("/mall/order/detail/"+ this.shopId, {}, false, 'get', 'application/json').then((res) => { |
|||
if (res.code == 200) { |
|||
that.data = res.result |
|||
|
|||
that.data.goodsNum = 0 |
|||
for(let m=0;m<that.data.goodsList.length;m++){ |
|||
that.data.goodsNum += that.data.goodsList[m].quantity |
|||
} |
|||
that.$forceUpdate() |
|||
} else { |
|||
that.tui.toast(res.message); |
|||
return; |
|||
} |
|||
uni.hideLoading(); |
|||
}).catch((res) => {}); |
|||
}, |
|||
makeCall(phone){ |
|||
uni.makePhoneCall({ |
|||
phoneNumber: phone |
|||
}); |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
.content{ |
|||
margin: -140rpx auto; |
|||
} |
|||
.box1 { |
|||
width: 95%; |
|||
margin: 20rpx auto; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx; |
|||
} |
|||
.bottom{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
} |
|||
.btn{ |
|||
height: 25px; |
|||
width: 65px; |
|||
line-height: 25px; |
|||
background: linear-gradient(90deg, #e3ff96, #a6ffea); |
|||
text-align: center; |
|||
border-radius: 7px; |
|||
font-weight: 700; |
|||
float: right; |
|||
margin-left: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<!-- 商家账单列表 --> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
账单结算 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="margin: -120rpx auto 0;"> |
|||
<view class=""> |
|||
<view class="content11"> |
|||
2026 |
|||
</view> |
|||
<view class="box1" @tap="goDetail"> |
|||
<view class="content22"> |
|||
<view class=""> |
|||
10/25-10/25账单 |
|||
</view> |
|||
<view class=""> |
|||
共<text>0</text>单 |
|||
<uni-icons type="right" size="12"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view style="border-bottom: 1px solid #eee;"> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
商品金额 |
|||
</view> |
|||
<view class=""> |
|||
￥0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
餐盒费 |
|||
</view> |
|||
<view class=""> |
|||
￥0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
活动成本 |
|||
</view> |
|||
<view class=""> |
|||
￥0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
平台服务费 |
|||
</view> |
|||
<view class=""> |
|||
￥0.00 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
结算金额 |
|||
</view> |
|||
<view class=""> |
|||
￥0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
本期期初 |
|||
</view> |
|||
<view class=""> |
|||
￥0.00 |
|||
</view> |
|||
</view> |
|||
<view class="content33"> |
|||
<view class="content44"> |
|||
实际打款金额 |
|||
</view> |
|||
<view class=""> |
|||
￥0.00 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
onShow() { |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
}, |
|||
methods: { |
|||
goDetail(){ |
|||
uni.navigateTo({ |
|||
url:'/pages/shop/shopSettlementDetail' |
|||
}) |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
.box1 { |
|||
width: 95%; |
|||
margin: 0 auto 20rpx; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx; |
|||
} |
|||
.content11{ |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
padding-left: 40rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 700; |
|||
} |
|||
.content22{ |
|||
display: flex; |
|||
height: 60rpx; |
|||
line-height: 44rpx; |
|||
border-bottom: 1px solid #eee; |
|||
font-size: 26rpx; |
|||
font-weight: 600; |
|||
} |
|||
.content33{ |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
display: flex; |
|||
} |
|||
.content44{ |
|||
flex: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,434 @@ |
|||
<template> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
商家评价 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="shop-rate"> |
|||
<view class="rate-left"> |
|||
<view class="rate-num"> |
|||
{{shopItem.shopScore}} |
|||
</view> |
|||
<view class="rate-star"> |
|||
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="shopItem.shopScore" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class="menu-list"> |
|||
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index" |
|||
:style="{'font-size':item.checked?'40rpx':'30rpx','color':item.checked?'rgba(0, 35, 28, 1)':'#777','width':index == 0?'160rpx':'180rpx'}"> |
|||
<view :style="{'width':index == 0?'160rpx':'180rpx'}" style="text-align: left;"> |
|||
{{item.name}} {{item.num}} |
|||
</view> |
|||
<img v-if="item.checked" class="checked-img" |
|||
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" |
|||
alt="" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="evaluate-list" v-for="(item,index) in shopComments" :key="index"> |
|||
<view class="eval-title"> |
|||
<view class="eval-icon"> |
|||
<img :src="item.createByIcon" |
|||
alt="" /> |
|||
</view> |
|||
<view class="eval-name"> |
|||
<view class="name1"> |
|||
{{item.createByName}} |
|||
</view> |
|||
<view class="eval-time"> |
|||
{{item.createTime}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="eval-content"> |
|||
<view style="display: flex;height: 50rpx;line-height: 50rpx;font-size: 24rpx;"> |
|||
商品 |
|||
<view style="padding: 12rpx 0 0 10rpx;"> |
|||
<uni-rate v-model="item.score" size="12" /> |
|||
</view> |
|||
</view> |
|||
<view class="eval-text"> |
|||
{{item.remark}} |
|||
</view> |
|||
<view class="eval-img"> |
|||
<img @tap="largeImg" :src="item.picture" alt=""> |
|||
</view> |
|||
<view class="reply-card" :class="{'expanded': isExpanded}" v-for="(item1,index1) in item.comments" :key="index1"> |
|||
<!-- 标题行：商家回复 + 展开/收起按钮 --> |
|||
<view class="reply-header"> |
|||
<!-- 回复内容区域（动态类控制展开/折叠） --> |
|||
<view class="reply-content" :class="{ collapsed: !isExpanded, expanded: isExpanded }"> |
|||
<text>{{item1.createByName}} : {{ item1.remark }}</text> |
|||
</view> |
|||
<view class="reply-expand-btn" @click="toggleReply"> |
|||
<text v-if="!isExpanded">展开</text> |
|||
<text v-else>收起</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 查看大图弹出层 --> |
|||
<uni-popup ref="imgPopup" background-color="#fff"> |
|||
<view class="img-popup-content"> |
|||
<img :src="bigImg" alt="" style="width: 100%;height: 100%;"> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isExpanded: false, |
|||
bigImg: '', |
|||
shopItem:{}, |
|||
pageNum:1, |
|||
searchAll:true, |
|||
total:0, |
|||
shopComments:[], |
|||
searchForm:{ |
|||
shopId:'', |
|||
pageNum: 1, |
|||
score:0, |
|||
picture:0, |
|||
pageSize: '10' |
|||
}, |
|||
menuList: [{ |
|||
name: '全部', |
|||
num: "", |
|||
checked: true |
|||
}, { |
|||
name: '有图/视频', |
|||
num: '', |
|||
checked: false |
|||
}, { |
|||
name: '中差评', |
|||
num: '', |
|||
checked: false |
|||
}] |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
onLoad(option) { |
|||
this.shopItem = JSON.parse(uni.getStorageSync('area')).shop |
|||
console.log('shop',this.shopItem) |
|||
this.getshopComments(this.shopItem.shopId) |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
methods: { |
|||
getshopComments(id){ |
|||
let that = this |
|||
this.searchForm.shopId = id |
|||
this.NB.sendRequest("/app/comment/getCommentList", this.searchForm, false, 'POST', 'application/json').then((res) => { |
|||
if (res.code == 200) { |
|||
if (that.pageNum == 1) { |
|||
that.shopComments = res.result.records |
|||
} else { |
|||
that.shopComments = [...that.shopComments, ...res.result.records] |
|||
} |
|||
that.$forceUpdate() |
|||
if(this.searchAll){ |
|||
that.menuList[0].num = res.result.total |
|||
} |
|||
} else { |
|||
that.tui.toast(res.message) |
|||
return |
|||
} |
|||
uni.hideLoading() |
|||
}).catch((res) => {}) |
|||
}, |
|||
toggleReply() { |
|||
this.isExpanded = !this.isExpanded; |
|||
}, |
|||
checkTab(index) { |
|||
for (let i = 0; i < this.menuList.length; i++) { |
|||
if (i == index) { |
|||
this.menuList[i].checked = true |
|||
} else { |
|||
this.menuList[i].checked = false |
|||
} |
|||
} |
|||
if(index == 0){ |
|||
this.searchForm.picture = 0 |
|||
this.searchForm.score = 0 |
|||
}else if(index ==1){ |
|||
this.searchAll = false |
|||
this.searchForm.picture = 1 |
|||
this.searchForm.score = 0 |
|||
}else{ |
|||
this.searchAll = false |
|||
this.searchForm.picture = 0 |
|||
this.searchForm.score = 1 |
|||
} |
|||
this.getshopComments(this.shopItem.id) |
|||
}, |
|||
//查看大图 |
|||
largeImg(img) { |
|||
this.bigImg = 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png' |
|||
this.$refs.imgPopup.open() |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 54%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.content { |
|||
position: absolute; |
|||
top: 200rpx; |
|||
width: 95%; |
|||
margin-left: 2.5%; |
|||
} |
|||
|
|||
.shop-rate { |
|||
display: flex; |
|||
padding-bottom: 30rpx; |
|||
} |
|||
|
|||
.rate-left { |
|||
display: flex; |
|||
flex: 1; |
|||
} |
|||
|
|||
.rate-num { |
|||
font-size: 86rpx; |
|||
font-weight: 700; |
|||
background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1)); |
|||
background-clip: text; |
|||
color: transparent; |
|||
} |
|||
|
|||
.rate-right { |
|||
display: flex; |
|||
width: 160rpx; |
|||
height: 100rpx; |
|||
line-height: 40rpx; |
|||
font-size: 36rpx; |
|||
text-align: center; |
|||
font-weight: 700; |
|||
border-left: 1px solid #eee; |
|||
} |
|||
|
|||
.rate-star { |
|||
height: 100rpx; |
|||
padding: 32rpx 20rpx; |
|||
} |
|||
|
|||
.right1 { |
|||
margin: 20rpx 0 0 5%; |
|||
width: 45%; |
|||
} |
|||
|
|||
.menu-list { |
|||
height: 100rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
overflow-y: hidden; |
|||
padding-top: 30rpx; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
|
|||
.checked-img { |
|||
width: 100%; |
|||
height: 20rpx; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.menu1 { |
|||
width: 180rpx; |
|||
height: 70rpx; |
|||
position: relative; |
|||
margin-right: 20rpx; |
|||
line-height: 70rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.evaluate-list { |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
.eval-title { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
display: flex; |
|||
} |
|||
|
|||
.eval-icon { |
|||
height: 80rpx; |
|||
width: 80rpx; |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-size: 100%; |
|||
} |
|||
} |
|||
|
|||
.eval-name { |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
.name1 { |
|||
font-size: 28rpx; |
|||
line-height: 50rpx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.eval-rate { |
|||
display: flex; |
|||
margin: 20rpx 0 0 100rpx; |
|||
height: 48rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.eval-content { |
|||
margin-left: 100rpx; |
|||
font-size: 28rpx; |
|||
color: #777; |
|||
line-height: 48rpx; |
|||
} |
|||
|
|||
.eval-img { |
|||
display: flex; |
|||
width: 100%; |
|||
overflow-x: scroll; |
|||
margin-top: 20rpx; |
|||
|
|||
img { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
background-size: 100%; |
|||
margin-right: 20rpx; |
|||
} |
|||
} |
|||
|
|||
/* 卡片整体样式（可根据需要调整外间距） */ |
|||
.reply-card { |
|||
border-radius: 12rpx; |
|||
background-color: #eee; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
margin-top:20rpx; |
|||
} |
|||
|
|||
/* 标题行：左标签 + 右按钮 */ |
|||
.reply-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.reply-label { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
.reply-expand-btn { |
|||
font-size: 24rpx; |
|||
padding: 4rpx 12rpx; |
|||
} |
|||
|
|||
/* 回复内容基础样式 */ |
|||
.reply-content { |
|||
font-size: 26rpx; |
|||
color: #555; |
|||
padding: 12rpx; |
|||
transition: all 0.2s; |
|||
height: 70rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
/* 折叠状态：单行省略 */ |
|||
.reply-content.collapsed { |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
/* 展开状态：固定高度100px，可滚动 */ |
|||
.reply-content.expanded { |
|||
display: block; |
|||
height: 200rpx; |
|||
/* 固定高度100px */ |
|||
overflow-y: auto; |
|||
/* 内容超长时滚动 */ |
|||
/* 重置折叠相关属性 */ |
|||
-webkit-line-clamp: unset; |
|||
-webkit-box-orient: unset; |
|||
text-overflow: clip; |
|||
} |
|||
|
|||
/* 滚动条美化（可选） */ |
|||
.reply-content.expanded::-webkit-scrollbar { |
|||
width: 12rpx; |
|||
} |
|||
|
|||
.reply-content.expanded::-webkit-scrollbar-thumb { |
|||
background-color: #ccc; |
|||
border-radius: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,330 @@ |
|||
<template> |
|||
<!-- 商家订单列表 --> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
|||
商家订单 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="title-tab"> |
|||
<scroll-view class="status-scroll-view" scroll-x enable-flex :show-scrollbar="false" |
|||
:scroll-with-animation="true"> |
|||
<view class="status-list"> |
|||
<view v-for="(item, index) in statusList" :key="index" class="status-item" |
|||
:class="{ 'active': currentIndex == item.value }" @click="handleStatusClick(item.value,item.value)"> |
|||
<text class="status-text">{{ item.name }}</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="box1" @tap="goDetail(item.id)" v-for="(item,index) in orderList" :key="index"> |
|||
<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;"> |
|||
<view> |
|||
{{'#' + item.numberCode}} |
|||
</view> |
|||
<view style="flex: 1;display: flex;padding-left: 20rpx;"> |
|||
{{item.createTime | formatISOTime}} |
|||
<!-- <text>已退款</text> --> |
|||
</view> |
|||
<view> |
|||
{{item.status == 0?'待支付':item.status == 1?' 待成团':item.status == 2?'待消费':item.status == 3?'待接单':item.status == 4?'待取货':item.status == 5?'待送达':item.status == 6?'已完成':item.status == 7?'待退款':item.status == 8?'已退款':item.status == 9?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':""}} |
|||
</view> |
|||
</view> |
|||
<view style="height: 120rpx;padding-top: 20rpx;"> |
|||
<view style="height: 50rpx;line-height: 50rpx;font-size: 28rpx;font-weight: 700;display: flex;"> |
|||
商品 <text>共<text>{{item.goodsNum}}</text>件</text> <text style="color: red;flex: 1;text-align: right;">已出餐</text> |
|||
</view> |
|||
<view style="display: flex;" v-for="(item1,index1) in item.goodsList" :key="index"> |
|||
<view style="flex: 1;"> |
|||
{{item1.productName}} |
|||
</view> |
|||
<view style="width: 100rpx;"> |
|||
{{'X' + item1.quantity}} |
|||
</view> |
|||
<view> |
|||
{{'￥'+ item1.price}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
loadStatus: 'more', |
|||
searchForm:{ |
|||
pageNum:1, |
|||
pageSize:10, |
|||
shopName:'', |
|||
searchStatus:10, |
|||
shopId:uni.getStorageSync('shopId'), |
|||
regionId:JSON.parse(uni.getStorageSync('shop')).shop.shopArea |
|||
}, |
|||
totalPages: 1, |
|||
orderList:[], |
|||
currentIndex: 10, |
|||
menuButtonInfo: {}, |
|||
statusList: [{ |
|||
name: '全部', |
|||
value: 10, |
|||
checked: true |
|||
},{ |
|||
name: '待支付', |
|||
value: 0, |
|||
checked: true |
|||
}, |
|||
{ |
|||
name: '待成团', |
|||
value: 1, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '待消费', |
|||
value: 2, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '待接单', |
|||
value: 3, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '待取货', |
|||
value: 4, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '待送达', |
|||
value: 5, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '已完成', |
|||
value: 6, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '待退款', |
|||
value: 7, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '已退款', |
|||
value: 8, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '已取消', |
|||
value: 9, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '售后中', |
|||
value: 11, |
|||
checked: false |
|||
}, |
|||
{ |
|||
name: '已售后', |
|||
value: 12, |
|||
checked: false |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
onReachBottom() { |
|||
if (this.searchForm.pageNum >= this.totalPages) return; |
|||
// this.status = 'loading'; |
|||
this.searchForm.pageNum++; |
|||
this.getOrderList(); |
|||
}, |
|||
filters:{ |
|||
formatISOTime(isoString) { |
|||
const date = new Date(isoString); |
|||
const year = date.getFullYear(); |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
|||
const day = date.getDate().toString().padStart(2, '0'); |
|||
const hours = date.getHours().toString().padStart(2, '0'); |
|||
const minutes = date.getMinutes().toString().padStart(2, '0'); |
|||
const seconds = date.getSeconds().toString().padStart(2, '0'); |
|||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
}, |
|||
onLoad(option) { |
|||
if(option.index){ |
|||
this.searchForm.searchStatus = option.index |
|||
this.currentIndex = option.index |
|||
} |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
getList(){ |
|||
this.loadStatus = 'loading' |
|||
let that = this |
|||
that.tui.request("/mall/order/page", "POST", this.searchForm, false, false).then((res) => { |
|||
that.loadStatus = 'nomore'; |
|||
if (res.code == 200) { |
|||
if (that.searchForm.pageNum == 1) { |
|||
that.orderList = res.result.records; |
|||
} else { |
|||
that.orderList = [...that.orderList, ...res.result.records] |
|||
} |
|||
for(let i=0;i<that.orderList.length;i++){ |
|||
that.orderList[i].goodsNum = 0 |
|||
for(let m=0;m<that.orderList[i].goodsList.length;m++){ |
|||
that.orderList[i].goodsNum += that.orderList[i].goodsList[m].quantity |
|||
} |
|||
} |
|||
that.totalPages = res.result.pages; // pages = 总页数 |
|||
that.$forceUpdate(); |
|||
} else { |
|||
that.tui.toast(res.message); |
|||
return; |
|||
} |
|||
uni.hideLoading(); |
|||
}).catch((res) => {}); |
|||
}, |
|||
goDetail(id){ |
|||
uni.navigateTo({ |
|||
url:'/package2/shop/orderDetail?id=' + id |
|||
}) |
|||
}, |
|||
handleStatusClick(index,value) { |
|||
if (this.currentIndex === index) return; |
|||
this.currentIndex = index; |
|||
this.searchForm.searchStatus = value |
|||
this.getList() |
|||
}, |
|||
back() { |
|||
uni.navigateBack() |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.title-tab { |
|||
display: flex; |
|||
margin: -120rpx auto 0; |
|||
} |
|||
|
|||
.status-scroll-view { |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
/* 辅助滚动，与 flex 配合确保不换行 */ |
|||
height: auto; |
|||
} |
|||
|
|||
.status-list { |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: nowrap; |
|||
align-items: center; |
|||
padding: 0 0; |
|||
/* 可根据设计添加左右留白，但会影响“一排5个”精准计算，故留白为0 */ |
|||
min-height: 88rpx; |
|||
/* 保证内部项撑开高度 */ |
|||
} |
|||
|
|||
/* 每个状态项：宽度为屏幕宽度的1/5，保证一行正好显示5个，超出滚动 */ |
|||
.status-item { |
|||
flex-shrink: 0; |
|||
width: 20vw; |
|||
/* 关键：屏幕宽度的1/5，正好一排5个 */ |
|||
text-align: center; |
|||
padding: 20rpx 0; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
|||
/* 点击反馈 */ |
|||
-webkit-tap-highlight-color: transparent; |
|||
} |
|||
|
|||
.status-text { |
|||
font-size: 28rpx; |
|||
color: #666666; |
|||
font-weight: normal; |
|||
line-height: 1.4; |
|||
transition: color 0.2s, font-weight 0.2s; |
|||
} |
|||
|
|||
/* 激活状态样式 */ |
|||
.status-item.active .status-text { |
|||
color: #ff6b35; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 激活指示条（下划线） */ |
|||
.status-item.active::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 40rpx; |
|||
height: 4rpx; |
|||
background-color: #ff6b35; |
|||
border-radius: 2rpx; |
|||
transition: width 0.2s ease; |
|||
} |
|||
|
|||
.box1 { |
|||
width: 95%; |
|||
margin: 20rpx auto; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,154 @@ |
|||
<template> |
|||
<!-- 商家订单详情 --> |
|||
<view class="page1"> |
|||
<view class="title"> |
|||
<view class="title-sreach"> |
|||
<view class="back-btn" @tap="back"> |
|||
<uni-icons type="left" size="28"></uni-icons> |
|||
</view> |
|||
<view class="title-name"> |
|||
账单详情 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="box1"> |
|||
<view style="font-size: 14px;font-weight: 700;margin-bottom: 10px;"> |
|||
2026-04-09 |
|||
</view> |
|||
<view style="display: flex;font-weight: 700;"> |
|||
<view style="flex: 1;"> |
|||
结算金额：￥100.00 |
|||
</view> |
|||
<view style="flex: 1;"> |
|||
实际打款金额：￥100.00 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="box1"> |
|||
<uni-table border stripe emptyText="暂无更多数据" > |
|||
<!-- 表头行 --> |
|||
<uni-tr> |
|||
<uni-th width="100" align="center">订单编号</uni-th> |
|||
<uni-th width="100" align="center">商品金额</uni-th> |
|||
<uni-th width="100" align="center">餐盒费</uni-th> |
|||
<uni-th width="100" align="center">平台抽佣</uni-th> |
|||
<uni-th width="100" align="center">结算金额</uni-th> |
|||
</uni-tr> |
|||
<!-- 表格数据行 --> |
|||
<uni-tr> |
|||
<uni-td align="center">5154564164654</uni-td> |
|||
<uni-td align="center">24</uni-td> |
|||
<uni-td align="center">1</uni-td> |
|||
<uni-td align="center">1</uni-td> |
|||
<uni-td align="center">22</uni-td> |
|||
</uni-tr> |
|||
<uni-tr> |
|||
<uni-td align="center">5154564164654</uni-td> |
|||
<uni-td align="center">24</uni-td> |
|||
<uni-td align="center">1</uni-td> |
|||
<uni-td align="center">1</uni-td> |
|||
<uni-td align="center">22</uni-td> |
|||
</uni-tr> |
|||
<uni-tr> |
|||
<uni-td align="center">5154564164654</uni-td> |
|||
<uni-td align="center">24</uni-td> |
|||
<uni-td align="center">1</uni-td> |
|||
<uni-td align="center">1</uni-td> |
|||
<uni-td align="center">22</uni-td> |
|||
</uni-tr> |
|||
<uni-tr> |
|||
<uni-td align="center">5154564164654</uni-td> |
|||
<uni-td align="center">24</uni-td> |
|||
<uni-td align="center">1</uni-td> |
|||
<uni-td align="center">1</uni-td> |
|||
<uni-td align="center">22</uni-td> |
|||
</uni-tr> |
|||
</uni-table> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
filters:{ |
|||
formatISOTime(isoString) { |
|||
const date = new Date(isoString); |
|||
const year = date.getFullYear(); |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
|||
const day = date.getDate().toString().padStart(2, '0'); |
|||
const hours = date.getHours().toString().padStart(2, '0'); |
|||
const minutes = date.getMinutes().toString().padStart(2, '0'); |
|||
const seconds = date.getSeconds().toString().padStart(2, '0'); |
|||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|||
} |
|||
}, |
|||
onShow() { |
|||
|
|||
}, |
|||
onLoad() { |
|||
}, |
|||
methods: { |
|||
back() { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
background: #F5F8F5; |
|||
color: #00231C; |
|||
} |
|||
|
|||
.page1 { |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 24rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
|||
width: 100%; |
|||
height: 20%; |
|||
} |
|||
|
|||
.title-sreach { |
|||
width: 100%; |
|||
display: flex; |
|||
height: 200rpx; |
|||
position: relative; |
|||
} |
|||
|
|||
.back-btn { |
|||
padding-top: 110rpx; |
|||
} |
|||
|
|||
.title-name { |
|||
padding-top: 110rpx; |
|||
font-size: 36rpx; |
|||
font-weight: 700; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
.content{ |
|||
margin: -140rpx auto; |
|||
} |
|||
.box1 { |
|||
width: 95%; |
|||
margin: 20rpx auto; |
|||
background: #fff; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue