kaiguan-zfb/page_components/bindsz.vue
2024-08-03 18:03:02 +08:00

1281 lines
30 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<u-navbar title="设备设置" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff' title-size='36'
height='50'></u-navbar>
<view class="card">
<view class="icon">
<view class="imgbox" v-if="userImgs">
<button style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;" @click="getImage">
<image style="border-radius: 10rpx;" :src="userImgs" mode="aspectFit"></image>
</button>
</view>
<view class="imgbox" v-else>
<button style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;" @click="getImage">
<image src="https://api.ccttiot.com/smartmeter/img/static/uY8CPw9YE6JxPzcHUaqf" mode="aspectFit"></image>
</button>
</view>
<!-- 截图 -->
<ksp-cropper mode="free" :width="142" :height="142" :maxWidth="1024" :maxHeight="1024" :url="url"
@cancel="oncancel" @ok="onok"></ksp-cropper>
</view>
<view class="li" @click.stop="sremakemc()">
<view class="tit">
设备名称
</view>
<view class="info">
<view class="txt">
{{listobj.deviceName}}
</view>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
<view class="li" @click.stop="sremake()">
<view class="tit">
备注
</view>
<view class="info">
<view class="txt">
{{remake == null ? '' : remake}}
</view>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
<view class="li">
<view class="tit">
S/N
</view>
<view class="info">
<view class="txt">
{{listobj.deviceNo == null ? '' : listobj.deviceNo}}
</view>
</view>
</view>
<view class="li">
<view class="tit">
型号
</view>
<view class="info">
<view class="txt">
{{listobj.model == null ? '' : listobj.model}}
</view>
</view>
</view>
<view class="li" @click="btntc">
<view class="tit">
套餐设置
</view>
<view class="info">
<view class="txt" style="display: flex;">
<view class="">{{taocan.length > 5 ? taocan.slice(0,5) + '...' : taocan}}</view> <view style="padding-top: 6rpx;" class="iconfont icon-xiangyou1"></view>
</view>
</view>
</view>
<view class="li" @click.stop="sremakes">
<view class="tit">
归属店铺
</view>
<view class="info">
<view class="txt">
{{listobj.storeName == null ? '' : listobj.storeName}}
</view>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
<view class="li" @click="btnwifi">
<view class="tit">
WiFi配网
</view>
<view class="info">
<view class="txt">
{{listobj.wifi == null ? '' : listobj.wifi}}
</view>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view>
</view>
<u-mask :show="showloading"></u-mask>
<u-mask :show="showfz"></u-mask>
<view class="fz" v-show="showfz">
<view class="fz_top">
<view class="iconfont icon-shanchu" @click="showfz=false">
</view>
<view class="tit">
设备分组
</view>
<view class="txt" @click="tosetpage()">
管理
</view>
</view>
<view class="card_cont">
<view class="cards" v-for="(item,index) in groupList" :key="index" @click="changeGp(item)">
<view class="txt">
{{item.groupName}}
</view>
<view class="num">
{{item.deviceCount}}
</view>
</view>
<view class="zhanwei" style="width: 100%;height: 100rpx;">
</view>
</view>
</view>
<view class="dd">
<u-select v-model="show" :list="list" title='欠费断电' @confirm="confirm"></u-select>
</view>
<u-popup v-model="showpopup" mode="center" border-radius='20'>
<view class="popcard" v-if="showremake">
<view class="tit">
修改备注
</view>
<view class="ipt">
<u-input v-model="remake" placeholder=" " border='surround' placeholder-style='font-size: 24rpx;' />
</view>
<view class="btnbox">
<view class="btn2" @click="close()">
取消
</view>
<view class="btn1" @click="sub(1)">
确定
</view>
</view>
</view>
<view class="popcard" v-if="showpeice">
<view class="tit">
修改备注
</view>
<view class="ipt">
<u-input v-model="price" placeholder=" " border='surround' placeholder-style='font-size: 24rpx;' />
</view>
<view class="btnbox">
<view class="btn2" @click="close()">
取消
</view>
<view class="btn1" @click="sub(2)">
确定
</view>
</view>
</view>
</u-popup>
<u-popup v-model="showmc" mode="center" border-radius='20'>
<view class="popcard" v-if="showmc">
<view class="tit">
修改名称
</view>
<view class="ipt">
<u-input v-model="xgname" placeholder=" " border='surround' placeholder-style='font-size: 24rpx;' />
</view>
<view class="btnbox">
<view class="btn2" @click="close()">
取消
</view>
<view class="btn1" @click="sub(3)">
确定
</view>
</view>
</view>
</u-popup>
<!-- <view class="btn" @click="deldevice()">
解除绑定
</view> -->
<!-- 选择店铺 -->
<u-select v-model="showshop" :list="wateringList" @confirm="confirms"></u-select>
<!-- 蓝牙连接 -->
<view class="bluetoothbox" v-if="bluetoothflag">
<view class="stop">
正在连接该设备蓝牙
</view>
<view class="xtop">
请将手机与设备尽量靠近
</view>
<image src="https://api.ccttiot.com/smartmeter/img/static/ucDphMKsozqwwllJTAKL" mode=""></image>
<!-- <view class="xqx" @click="bluetoothflag = false">
取消连接
</view> -->
</view>
<!-- 蓝牙连接失败 -->
<view class="bluetoothbox" v-if="shibaiflag">
<image class="img" src="https://api.ccttiot.com/smartmeter/img/static/uTb3vSlbcHdPMFQMBjyL" mode=""></image>
<view class="one">
蓝牙连接失败
</view>
<view class="two">
请确保手机足够靠近设备
</view>
<view class="thr">
并且设备处于上电状态
</view>
<view class="anfour">
<view class="qx" @click="btnlyqx">
取消
</view>
<view class="cx" @click="btnwifi">
重新连接
</view>
</view>
</view>
</view>
</template>
<script>
var xBlufi = require("@/page_components/blufi/xBlufi.js")
export default {
data() {
return {
bluetoothflag:false,
shibaiflag:false,
bgc: {
backgroundColor: "#8883f0",
},
showloading: false,
showfz: false,
show: false,
showshop: false,
list: [{
value: '1',
label: '欠费立即断电'
},
{
value: '0',
label: '欠费不断电'
}
],
id: '',
xgname:'',
deviceInfo: {},
groupList: {},
showpopup: false,
remake: '',
price: '',
showpeice: false,
showremake: false,
listobj: {
deviceName:'',
storeName:'',
deviceNo:'',
model:'',
wifi:'',
},
showmc:false,
pagenum: 1,
wateringList: [],
pagesize: 10,
isLoading: false,
noMoreData: false,
total: 0,
storeId:'',
devicesList:[],
setMode:null,
mac:'',
name:'',
deviceId:'',
isMch:false,
taocan:'',
token:'',
userImgs:'',
url:''
}
},
onLoad(option) {
let id = option.id
this.id = id
this.getDevice(id)
},
onShow() {
this.setMode == null
this.taocan = ''
this.getQiniuToken()
this.getgroup()
this.gettanc()
this.getlistobj(this.id)
this.getuserinfo()
this.getao()
},
// 分享到好友(会话)
onShareAppMessage: function () {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function () {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
methods: {
btnlyqx(){
this.shibaiflag = false
this.bluetoothflag = false
},
// 修改图片
getImage() {
uni.chooseImage({
count: 1,
success: (rst) => {
this.url = rst.tempFilePaths[0];
}
})
},
onok(ev) {
this.url = "";
this.path = ev.path;
let _this = this
let math = 'static/' + _this.$u.guid(20)
wx.uploadFile({
url: 'https://up-z2.qiniup.com',
name: 'file',
filePath: _this.path,
formData: {
token: _this.token, //后端返回的token
key: 'smartmeter/img/' + math
},
success: function(res) {
let str = JSON.parse(res.data)
_this.userImgs = 'https://api.ccttiot.com/' + str.key
let data = {
deviceId:_this.id,
customPicture:_this.userImgs
}
_this.$u.put('/app/device', data).then((res) => {
if (res.code == 200) {
this.getDevice()
uni.showToast({
title: '操作成功',
icon: 'none',
duration: 2000
})
}
})
}
})
},
oncancel() {
// url设置为空隐藏控件
this.url = ""
},
// getImage(e) {
// let _this = this
// let math = 'static/' + _this.$u.guid(20)
// uni.chooseImage({
// count: 9,
// type: 'all',
// success(res) {
// // console.log(res);
// const tempFilePaths = res.tempFilePaths[0]
// wx.uploadFile({
// url: 'https://up-z2.qiniup.com',
// name: 'file',
// filePath: tempFilePaths,
// formData: {
// token: _this.token, //后端返回的token
// key: 'smartmeter/img/' + math
// },
// success: function(res) {
// console.log(res, 'resres');
// let str = JSON.parse(res.data)
// _this.userImgs = 'https://api.ccttiot.com/' + str.key
// let data = {
// deviceId:_this.id,
// customPicture:_this.userImgs
// }
// _this.$u.put('/app/device', data).then((res) => {
// if (res.code == 200) {
// this.getDevice()
// uni.showToast({
// title: '操作成功',
// icon: 'none',
// duration: 2000
// })
// }
// })
// }
// })
// }
// })
// },
// 获取上传七牛云token
getQiniuToken() {
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
if (res.code == 200) {
this.token = res.token
}
})
},
getao(){
this.$u.get(`/app/suit/listByDeviceId/${this.id}`).then(res => {
if(res.code == 200){
if(res.data.length <= 1){
res.data.forEach(item => {
this.taocan += item.name
})
}else{
res.data.forEach(item => {
this.taocan += item.name + ','
})
}
}
})
},
// 点击设置套餐
btntc(){
uni.navigateTo({
url:'/page_fenbao/statulist/taocanlist/index?id=' + this.id
})
},
// 获取当前用户信息
getuserinfo() {
this.$u.get("/app/user/userInfo").then((res) => {
if (res.code == 200) {
this.isMch = res.data.isMch
}
})
},
// 点击wifi进行配网
btnwifi(){
this.shibaiflag = false
this.bluetoothflag = true
// console.log(this.deviceId,'idididididdidii');
if(this.setMode == null){
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': true
})
// 停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
})
xBlufi.notifyConnectBle({
isStart: true,
deviceId: this.deviceId,
name: this.name
})
xBlufi.notifyInitBleEsp32({
deviceId: this.deviceId
})
let name = ''
let index = this.name.indexOf('-');
if (index !== -1) {
name = this.name.slice(index + 1);
}
let data = {
storeId: this.storeId,
mac: this.mac
}
this.$u.put('/app/device/bind', data).then((res) => {
if (res.code == 200) {
uni.hideLoading();
this.shibaiflag = false
this.bluetoothflag = false
uni.removeStorageSync('mac');
let systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform == 'android') {
// 当前设备是 Android
uni.navigateTo({
url: '/page_components/wifilist/index?deviceId=' +this.deviceId + '&name=' +this.name
})
} else if (systemInfo.platform == 'ios') {
// 当前设备是 iOS
uni.navigateTo({
url: '/page_fenbao/device/wifivideo?deviceId=' +this.deviceId + '&name=' +this.name
})
}
}else if(res.msg == '设备编号和mac不能同时为空'){
this.shibaiflag = true
this.bluetoothflag = false
// uni.showToast({
// title: '连接失败',
// icon: 'none',
// duration: 2000
// });
} else {
// uni.showToast({
// title: res.msg,
// icon: 'none',
// duration: 2000
// });
// uni.navigateBack()
}
})
}, 1000)
}else{
let name = ''
let index = this.name.indexOf('-');
if (index !== -1) {
name = this.name.slice(index + 1);
}
let data = {
storeId: this.storeId,
mac: this.mac
}
this.$u.put('/app/device/bind', data).then((res) => {
if (res.code == 200) {
// uni.showToast({
// title: '绑定成功',
// icon: 'none',
// duration: 2000
// })
this.shibaiflag = false
this.bluetoothflag = false
uni.hideLoading();
uni.removeStorageSync('mac');
let systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform == 'android') {
// 当前设备是 Android
uni.navigateTo({
url: '/page_components/wifilist/index?deviceId=' +this.deviceId + '&name=' +this.name
})
} else if (systemInfo.platform == 'ios') {
// 当前设备是 iOS
uni.navigateTo({
url: '/page_fenbao/device/wifivideo?deviceId=' +this.deviceId + '&name=' +this.name
})
}
}else {
if(res.msg == '设备编号和mac不能同时为空'){
this.shibaiflag = true
this.bluetoothflag = false
uni.hideLoading()
// uni.showToast({
// title: '连接失败',
// icon: 'none',
// duration: 2000
// })
} else {
this.shibaiflag = true
this.bluetoothflag = false
uni.hideLoading()
uni.showToast({
title:res.msg,
icon: 'none',
duration: 2000
})
// uni.navigateBack()
}
}
})
}
},
sremakes() {
if(this.wateringList.length == 0){
let that = this
uni.showModal({
title: '提示',
content: '未创建店铺,是否去创建店铺?',
success: function(res) {
if (res.confirm) {
uni.navigateTo({
url:'/page_fenbao/statulist/myshop/shopxx/index'
})
} else if (res.cancel) {
}
}
})
}else{
this.showshop = true
}
},
confirms(e){
console.log(e);
let data = {
deviceId: this.id,
storeId:e[0].value
}
this.putdevice(data)
setTimeout(()=>{
this.getlistobj(this.id)
},1000)
},
gettanc(){
this.$u.get('/app/store/listCount').then((res) => {
if (res.code == 200) {
this.total = res.total
if (res.data.length > 0) {
// 有数据,追加到列表
let arr = res.data.map(row => ({
value: row.storeId, // 将storeId赋值给value
label: row.name // 将name赋值给label
}));
this.wateringList = this.wateringList.concat(arr)
this.wateringList = this.wateringList.slice(1)
this.pagenum++
console.log(this.wateringList);
} else {
// 没有更多数据
this.noMoreData = true;
}
this.isLoading = false;
}
})
},
onReachBottom() {
let sum = this.total / this.pagesize
if (this.pagenum - 1 < sum) {
this.getlist(); // 上拉加载更多
} else {
uni.showToast({
title: '没有更多订单记录了',
icon: 'none',
duration: 1000
});
}
},
changeGp(item) {
let data = {
deviceId: this.id,
groupId: item.groupId
}
this.putdevice(data)
this.showfz = false
setTimeout(() => {
this.getgroup()
}, 1000)
},
tosetpage() {
this.showfz = false
uni.navigateTo({
url: '/page_user/fenzu'
})
},
sub(num) {
if (num == 1) {
let data = {
deviceId: this.id,
remark: this.remake
}
this.showpopup = false
this.showremake = false
this.putdevice(data)
} else if (num == 2) {
let data = {
deviceId: this.id,
price: this.price,
}
this.showpopup = false
this.showpeice = false
this.showmc = false
this.putdevice(data)
}else if(num == 3){
console.log(this.xgname);
let data = {
deviceId: this.id,
deviceName: this.xgname,
}
this.showpopup = false
this.showpeice = false
this.showmc = false
this.putdevice(data)
setTimeout(()=>{
this.getlistobj(this.id)
},1000)
}
},
deldevice() {
uni.showModal({
title: '确认解绑',
content: '您确定要解绑设备吗?',
success: (resModal) => {
if (resModal.confirm) {
this.$u.delete(`/app/device/mch/unbind/${this.id}`).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '解除成功',
icon: 'none',
duration: 2000
});
uni.navigateBack({
delta: 2 // 返回上级页面
});
} else if(res.code == 500){
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch((error) => {
// 请求失败的处理逻辑
uni.showToast({
title: '请求失败',
icon: 'none',
duration: 2000
});
});
} else if (resModal.cancel) { // 用户点击了取消按钮
uni.showToast({
title: '已取消',
icon: 'none',
duration: 1000
});
}
}
});
},
confirm(e) {
let data = {
deviceId: this.id,
outageWay: e[0].value
}
this.putdevice(data)
},
putdevice(data) {
this.$u.put('/app/device', data).then((res) => {
if (res.code == 200) {
this.getDevice()
uni.showToast({
title: '修改成功',
icon: 'none',
duration: 2000
});
}
})
},
sremakemc(){
console.log(1);
this.showmc = true
this.xgname = this.listobj.deviceName
},
sremake() {
this.showpopup = true
this.showremake = true
},
sprice() {
this.showpopup = true
this.showpeice = true
},
close() {
this.showpeice = false
this.showremake = false
this.showpopup = false
this.showmc = false
},
getDevice(id) {
this.$u.get("/app/device/" + this.id).then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.deviceInfo = res.data
this.storeId = res.data.storeId
this.price = this.deviceInfo.price
this.remake = this.deviceInfo.remark
this.qrResult = 'CTKG-' + res.data.mac
}
});
},
getgroup() {
this.$u.get("/app/store/listCount").then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.groupList = res.data
// this.loadings=true
// this.initChart()
}
});
},
getlistobj(id) {
this.$u.get("/app/device/" + id).then((res) => {
if (res.code == 200) {
this.listobj = res.data
if(res.data.customPicture){
this.userImgs = res.data.customPicture
}
}
})
},
funListenDeviceMsgEvent: function(options) {
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
let loadPercent = options.data;
let loadText = '文件读取中'
// console.log("文件读取中", options.data);
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
let ver_data = this.parseCustomData(options.data)
this.setMode = Math.floor(ver_data.setMode / 60)
console.log("1收到设备发来的自定义数据结果", ver_data,this.setMode)
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
let devicesarr = options.data
// console.log(devicesarr,'devicesarrdevicesarr');
devicesarr.forEach(device => {
const mac = device.name.substring(5)
if (device.name == this.qrResult) {
this.deviceId = device.deviceId
this.name = device.name
this.mac = device.name.slice(5, 17)
// console.log(this.mac, 'macmacmac');
// this.devicesList = uniqueDevicesList;
}
})
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
// console.log("连接回调:" + JSON.stringify(options));
if (options.result) {
this.bluetoothflag = false
uni.hideLoading();
// uni.showToast({
// title: '连接成功',
// icon: 'none'
// });
{
console.log("连接回调options.data.deviceId" + options.data.deviceId,
"连接回调options.data.name" + options.data.name);
}
} else {
this.shibaiflag = true
this.bluetoothflag = false
uni.hideLoading()
// uni.showToast({
// title: '设备离线或不在范围内',
// icon: 'none',
// duration: 2000
// })
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
if (!options.result) {
setTimeout(()=>{
uni.hideLoading()
this.bluetoothflag = false
},3000)
console.log("蓝牙未开启", options);
// uni.showToast({
// title: '蓝牙未开启',
// icon: 'none',
// duration: 3000
// });
return
} else {
// this.searching = true
//蓝牙搜索开始
// _this.setData({
// searching: true
// });
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
if (options.result) {
let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
let list = []
filteredDevices.forEach(device => {
// 从设备名称中提取 MAC 地址(假设 MAC 地址是设备名称的后6个字符
let macFromName = device.name.substring(device.name.length - 12);
this.$u.get(`/app/device/${macFromName}/isBind`).then((res) => {
if (res.data == false) {
list.push(device)
} else {
}
})
});
setTimeout(() => {
this.devicesList = list
}, 200)
console.log('蓝牙停止搜索ok');
} else {
//蓝牙停止搜索失败
console.log('蓝牙停止搜索失败');
}
this.searching = false
// _this.setData({
// searching: false
// });
break;
}
},
parseCustomData(data) {
// 将字符串按照 "@" 分割成数组
const dataArray = data.split('@');
// 根据约定,解析各个字段的值
const voltage = parseFloat(dataArray[0].substring(1)); // 去除前缀 "V",并将字符串转换为浮点数
const switchState = dataArray[1].substring(1); // 去除前缀 "S"
const current = parseFloat(dataArray[2].substring(1)); // 去除前缀 "A",并将字符串转换为浮点数
const power = parseFloat(dataArray[4].substring(1)); // 去除前缀 "P",并将字符串转换为浮点数
const remainingPower = parseFloat(dataArray[5].substring(1)); // 去除前缀 "M",并将字符串转换为浮点数
const setMode = dataArray[6].substring(1); // 去除前缀 "T"
// 返回解析后的数据对象
return {
voltage,
switchState,
current,
power,
remainingPower,
setMode
};
},
}
}
</script>
<style lang="scss">
/deep/ .u-flex{
padding-top: 20rpx !important;
box-sizing: border-box;
}
/deep/ .panel{
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
z-index: 99 !important;
overflow: hidden;
}
/deep/ .u-title{
padding-bottom: 22rpx;
}
/deep/ .u-icon__icon{
padding-bottom: 22rpx;
}
.bluetoothbox{
width: 100%;
height: 100vh;
background-color: #f4f1f6;
position: fixed;
top: 0;
left: 0;
z-index: 99;
text-align: center;
.img{
margin-top: 400rpx;
width: 320rpx;
height: 320rpx;
}
.one{
font-size: 36rpx;
color: #000;
// margin-top: 80rpx;
}
.two{
margin-top: 30rpx;
font-size: 24rpx;
color: #ccc;
}
.thr{
margin-top: 30rpx;
font-size: 28rpx;
color: #ccc;
}
.anfour{
display: flex;
margin-top: 30rpx;
justify-content: space-between;
padding: 0 220rpx;
box-sizing: border-box;
.qx{
width: 100rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border: 1px solid #3D3D3D;
border-radius: 10rpx;
}
.cx{
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
background-color: #8883F0;
color: #fff;
border-radius: 10rpx;
}
}
.stop{
font-size: 36rpx;
color: #000;
margin-top: 380rpx;
}
.xtop{
margin-top: 30rpx;
font-size: 24rpx;
color: #ccc;
}
.xqx{
width: 530rpx;
height: 90rpx;
line-height: 90rpx;
// border: 1px solid #808080;
border-radius: 20rpx;
text-align: center;
background-color: #fff;
margin: auto;
margin-top: 200rpx;
}
image{
width: 500rpx;
height: 500rpx;
margin-top: 100rpx;
}
}
page {
background-color: #F7FAFE;
}
.page {
width: 750rpx;
.popcard {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 550rpx;
height: 400rpx;
border-radius: 20rpx;
.tit {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
font-size: 28rpx;
font-weight: 700;
}
.ipt {
margin-top: 60rpx;
width: 80%;
.u-input::placeholder {
font-size: 20px;
color: red;
}
}
.btnbox {
width: 100%;
display: flex;
flex-wrap: nowrap;
border-radius: 0 0 20rpx 20rpx;
.btn2 {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #000;
background-color:#fff;
}
.btn1 {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #fff;
background-color: #8883F0;
border: 1rpx solid #ccc;
}
}
}
.card {
padding: 16rpx 38rpx;
margin: 60rpx auto 0;
width: 654rpx;
background: #FFFFFF;
border-radius: 30rpx;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
opacity: 1;
.li {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
height: 94rpx;
border-bottom: #E5E5E5 solid 2rpx;
.tit {
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #000000;
}
.info {
display: flex;
flex-wrap: nowrap;
align-items: center;
.txt {
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #95989D;
}
.icon-xiangyou1 {
margin-left: 6rpx;
color: #95989D;
}
}
}
}
.btn {
display: flex;
align-items: center;
justify-content: center;
margin: 52rpx auto 0;
width: 654rpx;
height: 100rpx;
background: #FF4F4F;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
opacity: 1;
border-radius: 30rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
.fz {
position: fixed;
bottom: 0;
width: 750rpx;
height: 1152rpx;
background: #F7FAFE;
border-radius: 30rpx 30rpx 0 0;
z-index: 10071;
.fz_top {
margin: 18rpx 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.icon-shanchu {
margin-left: 40rpx;
font-size: 50rpx;
}
.tit {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
.txt {
margin-right: 40rpx;
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #8883F0;
}
}
.card_cont {
width: 750rpx;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
height: 1030rpx;
overflow-y: auto;
overflow-x: hidden;
.cards {
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
width: 682rpx;
border-radius: 30rpx;
height: 114rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
.txt {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
.num {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
}
}
}
}
.icon {
// display: flex;
// flex-wrap: wrap;
// align-items: center;
margin-top: 40rpx;
margin-bottom: 30rpx;
.imgbox {
// width: 33%;
image {
width: 142rpx;
height: 142rpx;
}
}
}
</style>