shop-applet/pages/nongKe/gather/select_warehouse.vue

1353 lines
37 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="select_warehouse">
<view class="wrapper flex_a_c_j_sb">
<block v-for="item in goodsData" :key="item.name">
<view class="select_item select_item1" @click="navigato(item.type)" :class="'select_item'+item.type">
<view class="title">{{ item.name }}</view>
<!-- <view class="iconfont icon-jiantou"></view> -->
<image class="img" :src="item.src"></image>
</view>
</block>
</view>
<view v-if="pageType==1" class="list-box-put">
<view class="item" v-for="(item, index) in goods" :key="index">
<view class="top">
<view class="pictrue">
<!-- <easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage> -->
<image class="img" :src="item.image||defaultImageSRC" :lazy-load="true" @click="clickImg(item, 1, 0)"></image>
<view class="swiper">
<image :src="item.slider_image[0]||defaultImageSRC" :lazy-load="true" @click="clickImg(item, 2, 0)"></image>
<image :src="item.slider_image[1]||defaultImageSRC" :lazy-load="true" @click="clickImg(item, 2, 1)"></image>
<image :src="item.slider_image[2]||defaultImageSRC" :lazy-load="true" @click="clickImg(item, 2, 2)"></image>
</view>
<view v-if="item.update" class="btn" @click="updateItemImage(item)">保存修改</view>
</view>
<view class="text-info">
<view class="title">
<view class="text_item_title">名称:</view>
<view style="color: #419aff;">{{ item.store_name }}</view>
</view>
<view class="text">
<view class="text_item">
<view class="text_item_title">规格: </view>
<view v-if="item.spec" v-html="item.spec"></view>
<view v-else>无</view>
</view>
<view class="text_item">
<view class="text_item_title">参考价格: </view>
<view>{{item.price||'0.00'}}(元)</view>
</view>
</view>
<view class="text">
<view class="text_item">
<view class="text_item_title">品牌: </view>
<view>{{item.trademark||'无'}}</view>
</view>
<view class="text_item">
<view class="text_item_title">分类: </view>
<view>{{item.goods_type||'无'}}</view>
</view>
</view>
<view class="text">
<view class="text_item">
<view class="text_item_title">厂商: </view>
<view>{{item.manu_name||'无'}}</view>
</view>
</view>
<view class="text">
<view class="text_item">
<view class="text_item_title">厂商地址: </view>
<view>{{item.manu_address||'无'}}</view>
</view>
</view>
<view class="text">
<view class="text_item">
<view class="text_item_title">备注: </view>
<u-read-more v-if="item.note" class="more" showHeight="50" :toggle="true" :fontSize="12"
:shadowStyle="shadowStyle" textIndent="0em" closeText="展开">
<text style="font-size: 24rpx;color: #333;" v-html="item.note"></text>
</u-read-more>
<text style="font-size: 24rpx;color: #333;" v-else>无</text>
</view>
</view>
</view>
</view>
<u-line></u-line>
<view class="bottom">
<view></view>
<view class="add-btn" @click="addGoods(item)">加入店铺</view>
</view>
</view>
</view>
<view v-if="pageType==2" class="photo-box">
<view class="card">
<view class="card-head">
<view class="text">请选择产品图片:</view>
<view>刷新: 3次</view>
</view>
<view class="img-list">
<image class="img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png" v-for="item in 6" :key="item"></image>
</view>
</view>
<view class="card">
<view class="card-head">
<view class="text">请选择产品图片:</view>
</view>
<view class="img-list img-list2">
<image class="img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png" v-for="item in 2" :key="item"></image>
</view>
</view>
<view class="card">
<view class="card-head">
<view class="text">请选择产品图片:</view>
</view>
<view class="img-list">
<image class="img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png" v-for="item in 3" :key="item"></image>
</view>
</view>
</view>
<u-popup :show="editGoodsShow" @close="editGoodsClose" :round="18" mode="center">
<view class="edit_goods_box">
<view class="edit_name flex_a_c edit_name_no">
<text>商品条码:</text><input type="text" disabled placeholder="请输入商品条码" v-model="editGoodsCode">
</view>
<view class="edit_name flex_a_c edit_name_no">
<text>商品名称:</text> <input type="text" disabled placeholder="请输入商品名称" v-model="editGoodsName">
</view>
<view class="edit_name flex_a_c">
编辑商品价格:<input type="text" placeholder="请输入商品名称" v-model="editGoodsPrice">
</view>
<view class="edit_store flex_a_c">
编辑商品库存:<input type="text" placeholder="请输入库存" v-model="editGoodsStore">
</view>
<view class="edit_goods_btn">
<u-button type="error" text="取消" class="edit_btn" @click="editGoodsShow=false">
</u-button>
<u-button type="primary" text="保存" class="edit_btn" @click="editGoodsClose">
</u-button>
</view>
</view>
</u-popup>
<!-- <u-modal :show="addGoodsShow" content='是否添加到你的仓库中?' @cancel="addGoodsclose()" @close="addGoodsclose()"
@confirm="addGoodsopen()" :closeOnClickOverlay="true" :showCancelButton="true"></u-modal> -->
<u-popup :show="addGoodsShow" @close="searchGoodsClose" :round="18" mode="center">
<view class="search_goods_box">
<view style="text-align: center;font-weight: bold;">完善商品信息</view>
<view style="display: flex;align-items: center;margin-top: 16rpx;">
<view style="margin-right: 20rpx;">名称:</view>
<input style="flex: 1;" type="text" v-model="putGoods.store_name" class="putGoods" placeholder="请输入商品名称">
</view>
<view style="display: flex;align-items: center;margin-top: 16rpx;">
<view style="margin-right: 20rpx;">价格:</view>
<input style="flex: 1;" type="text" v-model="putGoods.price" class="putGoods" :placeholder="`请输入商品价格`">
</view>
<view style="display: flex;align-items: center;margin-top: 16rpx;">
<view style="margin-right: 20rpx;">库存:</view>
<input style="flex: 1;" type="text" v-model="putGoods.stock" class="putGoods" placeholder="请输入商品库存">
</view>
<view v-if="showPutGoodsInput.spec" style="display: flex;align-items: center;margin-top: 16rpx;">
<view style="margin-right: 20rpx;">规格:</view>
<input style="flex: 1;" type="text" v-model="putGoods.spec" class="putGoods" placeholder="请输入商品规格">
</view>
<view v-if="showPutGoodsInput.trademark" style="display: flex;align-items: center;margin-top: 16rpx;">
<view style="margin-right: 20rpx;">品牌:</view>
<input style="flex: 1;" type="text" v-model="putGoods.trademark" class="putGoods" placeholder="请输入商品品牌">
</view>
<view class="search_goods_btn">
<view class="cancel edit_btn" @click="addGoodsclose()">取消</view>
<view class="search edit_btn" @click="$u.throttle(addGoodsopen, 1500)">确定</view>
</view>
</view>
</u-popup>
<u-popup :show="searchGoodsShow" @close="searchGoodsClose" :round="18" mode="center">
<view class="search_goods_box">
<input type="text" v-model="searchGoodsName" class="searchGoods" placeholder="请输入商品名称">
<view class="search_goods_btn">
<view class="cancel edit_btn" @click="searchGoodsShow=false">取消</view>
<view class="search edit_btn" @click="searchGoodsClose">搜索</view>
</view>
</view>
</u-popup>
<u-modal :show="showModel" title="提示" content="没有找到该商品,是否手动添加?" show-cancel-button @cancel="showModel = false" @confirm="navToAdd"></u-modal>
</view>
</template>
<script>
import {
TOKENNAME,
HTTP_REQUEST_URL
} from '@/config/app.js';
import {
productCreate
} from '@/api/product.js'
import {
microSeachBarCode,
microEadtProduct,
microProductAdd,
microProductEdit
} from '@/api/store.js'
import {
seachBarCodeAPI,
micro_product_import
} from '@/api/api.js'
import {
chooseImage,
Toast,
getStorage,
navigateTo
} from '@/libs/uniApi'
export default {
data() {
return {
pageType: 1, // 当前页面显示的类型, 1为商品列表, 2为手动选择图片进行添加
goodsData: [
{
name: '搜索名称入库',
type: 1,
// src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/mingcheng.png'
src: '/static/images/SMRK/name.png'
},
{
name: '标品扫码入库',
type: 2,
// src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png'
src: '/static/images/SMRK/bar.png'
},
{
name: '非标手动入库',
type: 3,
// src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png'
src: '/static/images/SMRK/img.png'
}
],
shadowStyle: {
backgroundImage: "none",
paddingTop: "0",
marginTop: "0",
},
defaultImageSRC: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/uploads/20230130/00ebcfdf75684f5494c0193075055d1.png',
product_id: '',
editGoodsCode: '',
editGoodsName: '',
editGoodsPrice: '',
editGoodsStore: '',
editGoodsShow: false, // 扫码修改商品信息
mer_id: 0,
searchGoodsShow: false,
searchGoodsName: '',
showModel: false,
showModelCode: '',
goods: [
// {
// "id": 7,
// "store_name": "心心相印 纸面巾400张",
// "bar_code": "6922868290895",
// "manu_address": "",
// "price": "4.80",
// "stock": 9999999,
// "image": "http://lihai001.oss-cn-chengdu.aliyuncs.com/def/2023-11-02/202311021740247976.jpg",
// "slider_image": [
// "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e4784202311041417185146.jpg"
// ],
// "spec": "****(企业未公开详细信息!)",
// "trademark": "****(企业未公开详细信息!)",
// "manu_name": null,
// "note": "备注经查该厂商识别代码已在中国物品编码中心注册但编码信息未按规定通报login_dateJul 13 1998 12:00:00:000AMvalid_dateJul 13 2020 12:00:00:000AM"
// },
],
putGoods: { // 加入店铺信息
id: '',
price: '',
stock: '',
store_name: '',
images: [],
},
uploadImgInfo:{ // 上传图片类型信息
id: '',
type: 1,
index: 0
},
uploadImgIdList: new Map(),//用于存储照片是否原本就存在,原本就有的照片不可更改
showPutGoodsInput: {
spec: false,
trademark: false,
},
item: [],
addGoodsShow: false,
}
},
onLoad(e) {
this.mer_id = e.mer_id
},
onShow() {
},
methods: {
addGoods(item) {
if(this.isNullImage(item.image)||
( this.isNullImage(item.slider_image[0]) && this.isNullImage(item.slider_image[1]) && this.isNullImage(item.slider_image[2]) )){
return Toast('请先上传商品图片后再加入店铺');
}
if(item.update) return Toast('请保存修改后再添加');
this.putGoods.id = item.id;
this.putGoods.price = '';
this.putGoods.stock = '';
this.putGoods.store_name = item.store_name;
Object.keys(this.showPutGoodsInput).forEach((key)=>{
if(item[key]==null||item[key]==undefined||item[key]==''){
this.showPutGoodsInput[key] = true;
this.putGoods[key] = '';
}
else {
this.showPutGoodsInput[key]=false;
this.putGoods[key] = item[key];
}
})
this.addGoodsShow = true
this.item = item
},
isNullImage(src){
let flag = false;
if(src==this.defaultImageSRC||!src)flag =true;
return flag;
},
clickImg(data, type, index){
// 已有的图片不允许更改
// if(!data.update&&!this.uploadImgIdList.get(data.id)){
// let arr = [];
// if(this.isNullImage(data.image))arr.push(-1);
// if(this.isNullImage(data.slider_image[0]))arr.push(0);
// if(this.isNullImage(data.slider_image[1]))arr.push(1);
// if(this.isNullImage(data.slider_image[2]))arr.push(2);
// this.uploadImgIdList.set(data.id, arr)
// }
// let obj = this.uploadImgIdList.get(data.id) || [];
// if(type==1&&!obj.includes(-1)) return ;
// if(type==2&&!obj.includes(index)) return ;
this.uploadImgInfo.id = data.id;
this.uploadImgInfo.type = type;
this.uploadImgInfo.index = index;
// if(data.image==this.defaultImageSRC||(type==2&&this.isNullImage(data.slider_image[index]))){
// this.chooseImg()
// }else if(data.update){
// this.chooseImg()
// }
// 如需改成已有的图片不可更改,请将上部分代码注释解开并将以下代码注释
this.chooseImg()
},
chooseImg(){
let that = this;
uni.chooseImage({
count: 1,
sizeType: ['original'],
crop:{
width: 1024,
height: 1024,
resize: false
},
success: (res) => {
let tempFilePaths = res.tempFilePaths[0]
//#ifdef APP-PLUS
if (uni.getSystemInfoSync().platform == 'ios') {
that.doUpload(tempFilePaths)
} else {
let size = res.tempFiles[0].size / 1024
if (size >= 1) {
uni.compressImage({
src: tempFilePaths,
quality: 80, // 仅对jpg有效
success: res => {
that.doUpload(res.tempFilePath)
},
fail: err => {
that.doUpload(tempFilePaths)
}
})
} else {
that.doUpload(tempFilePaths)
}
}
//#endif
//#ifndef APP-PLUS
that.doUpload(tempFilePaths)
//#endif
}
})
},
doUpload(rsp) {
let that = this
uni.showLoading({
title: '上传中',
mask: true
})
uni.uploadFile({
url: HTTP_REQUEST_URL + '/api/upload/image/field',
filePath: rsp,
name: 'field',
header: {
// #ifdef MP
"Content-Type": "multipart/form-data",
// #endif
[TOKENNAME]: 'Bearer ' + that.$store.state.app.token
},
success: (uploadFileRes) => {
let imgData = JSON.parse(uploadFileRes.data)
if(this.uploadImgInfo.type==1){
this.goods.forEach(item=>{
if(item.id==this.uploadImgInfo.id){
item.image = imgData.data.path;
item.update = true;
}
})
this.putGoods.image = imgData.data.path;
}else if(this.uploadImgInfo.type==2){
this.goods = this.goods.map(item=>{
if(item.id==this.uploadImgInfo.id){
item.slider_image[this.uploadImgInfo.index] = imgData.data.path;
item.update = true;
}
return item;
})
this.putGoods.slider_image[this.uploadImgInfo.index] = imgData.data.path;
}
},
complete(res) {
let data = JSON.parse(res.data)
that.$util.Tips({
title: data.message
});
}
});
},
// 更新图片
updateItemImage(item){
microProductEdit({
id: item.id,
image: item.image,
slider_image: item.slider_image.join(',')
}).then((res)=>{
this.goods = this.goods.map(e=>{
if(e.id==item.id)e.update = false;
return e;
})
Toast('更新成功')
}).catch(err=>{
Toast(err||'更新失败')
})
},
// 加入店铺
async addGoodsopen() {
let good = this.goods.find(item=>item.id==this.putGoods.id);
if (this.putGoods.id&&good) {
// 判断商品是否需要审核
let auditFlag = false;
Object.keys(this.showPutGoodsInput).forEach((key)=>{
if(this.showPutGoodsInput[key]){
auditFlag = true;
}
})
if(auditFlag){
let obj = Object.assign({}, good, this.putGoods);
obj.product_library_id = obj.id;
obj.slider_image = obj.slider_image.join(',')
// 拷贝并且合并对象, 防止出现浅拷贝
microProductAdd(obj).then(e => {
console.log(e);
if (e.status == 200) {
Toast(e.message)
this.goods = this.goods.filter(item => {
return item.id != this.putGoods.id
})
this.addGoodsShow = false;
} else {
Toast(e.message)
this.addGoodsShow = false;
}
}).catch(err => {
Toast(err || '导入出错');
console.log('导入出错', err);
this.addGoodsShow = false;
});
}
else micro_product_import(this.putGoods).then(e => {
console.log('导入错误', e);
if (e.status == 200) {
Toast(e.data.msg)
this.goods = this.goods.filter(item => {
return item.id != this.putGoods.id
})
this.addGoodsShow = false;
} else {
// console.log(e);
Toast(e.message)
this.addGoodsShow = false
}
}).catch(err => {
Toast(err || '导入出错');
console.log('导入出错', err);
this.addGoodsShow = false
})
}
this.item = []
},
addGoodsclose() {
this.addGoodsShow = false
},
openSearch() {},
async searchGoodsClose() {
if (this.searchGoodsName == '') {
this.searchGoodsShow = false
this.$nextTick(() => {
Toast('请输入商品名称')
})
return;
}
this.searchGoodsShow = false
await this.$nextTick();
uni.showLoading({
title: '加载中',
mask: true
})
const rq = {
mer_id: this.mer_id,
name: this.searchGoodsName
}
const {
data
} = await seachBarCodeAPI(rq).catch(err => Toast(err))
uni.hideLoading()
if (data.list.length < 1) {
this.searchGoodsShow = false
Toast("暂无搜索商品,请添加!")
setTimeout(() => {
uni.navigateTo({
url: `/pages/product/addGoods/index?mer_id=${rq.mer_id}`
})
}, 2000)
return
}
this.goods = data.list
},
async editGoodsClose() {
const data = {
price: this.editGoodsPrice,
stock: this.editGoodsStore,
id: this.product_id
}
try {
const res = await microEadtProduct(data)
Toast("更新成功")
this.editGoodsShow = false
} catch (e) {
Toast("更新失败")
this.editGoodsShow = false
}
},
navigato(type) {
if (type === 1) {
this.searchGoodsName = '';
this.searchGoodsShow = true;
this.pageType = 1;
} else if(type==2) {
this.scanCode();
this.pageType = 1;
}else {
// this.photograph();
// this.pageType = 2;
this.jumpAddGoods();
}
},
// 扫码
scanCode() {
const self = this
uni.scanCode({
scanType: ["qrCode", "barCode", "datamatrix", "pdf417"],
success(res) {
self.seachBarCode(res.result)
},
fail(res) {
// console.log(res);
},
})
},
isStartsWith6Or06(str) {
const regex = /^(6|06)/;
return regex.test(str);
},
async seachBarCode(code) {
if(code.length<12){
return Toast('条形码长度不正确, 请重试!')
}
this.showModelCode = code;
console.log('扫码的值', code);
if(!this.isStartsWith6Or06(code)) {
Toast('暂不支持进口商品!');
this.$u.sleep(1200).then(()=>{
this.showModel = true;
})
return ;
}
uni.showLoading({
title: '加载中',
mask: true
})
await seachBarCodeAPI({
code: code,
mer_id: this.mer_id
}).then(res => {
console.log(res);
uni.hideLoading()
if (!res.data) {
uni.showToast({
title: res.message,
duration: 3000,
icon: 'none',
});
} else {
if (res.data.list.length < 1) {
this.showModel = true;
return
}
this.goods = JSON.parse(JSON.stringify(res.data.list));
// if (res.data.list[0] && res.data.list[0].store_name == '') {
// this.goods = [];
// Toast('名字为空')
// } else this.goods = JSON.parse(JSON.stringify(res.data.list));
}
}).catch((err) => {
console.log('错误', err);
Toast(err);
this.$u.sleep(1200).then(()=>{
this.showModel = true;
})
})
},
// 拍照
photograph(){
uni.chooseImage({
count: 1,
crop:{
width: 1024,
height: 1024,
resize: false
},
success: (res) => {
console.log(res.tempFilePaths[0]);
}
})
},
navToAdd(){
let url;
if(this.showModelCode) url = `/pages/product/addGoods/index?mer_id=${this.mer_id}&code=${this.showModelCode}`;
else url = `/pages/product/addGoods/index?mer_id=${this.mer_id}`;
uni.navigateTo({
url:url,
success:()=> {
this.showModel = false;
}
})
},
// 跳转添加商品界面
jumpAddGoods() {
const data = getStorage('addGoodsFormData');
if (data && data.product_id) {
let waitDeleteData = ['addGoodsFormData', 'singleSpecification', 'attrValue', 'modifyPriceData',
'addGoodsSecoundData', 'goodsDis', 'editGoodsDetils'];
waitDeleteData.forEach(item => {
if (getStorage(item)) {
removeStorage(item);
}
})
}
navigateTo(1, '/pages/product/addGoods/index', {
mer_id: this.mer_id
});
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
}
</script>
<style lang="scss">
.select_warehouse {
padding-top: 20px;
}
.wrapper {
width: 694.74rpx;
margin: 0 auto;
}
.goods-wrapper {
.item {
display: flex;
height: 175.44rpx;
width: 100%;
background-color: #fff;
margin-top: 21.05rpx;
border-radius: 8px;
padding: 12px;
.l_cont {
image {
width: 133.33rpx;
height: 133.33rpx;
border-radius: 8px;
}
}
.r_cont {
margin-left: 17.54rpx;
}
}
}
.select_item {
width: 220.84rpx;
// width: 336rpx;
height: 189.47rpx;
border-radius: 8px;
background-color: #eee;
padding: 22rpx 0;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
background-size: cover;
background-repeat: no-repeat;
align-items: center;
.title {
font-size: 32.09rpx;
}
.img{
width: 90rpx;
height: 90rpx;
}
}
.select_item1{
background: linear-gradient(to right, #ffba00, #ff9000) !important;
}
.select_item2{
background: linear-gradient(to right, #459eff, #0a60ff) !important;
}
.select_item3{
background: linear-gradient(to right, #ff7245, #ff3f02) !important;
}
.search_goods_box {
width: 694.74rpx;
padding: 28.07rpx;
font-size: 31.58rpx;
.searchGoods {
height: 87.72rpx;
border: 1px solid #f5f5f5;
border-radius: 8px;
padding: 12px;
margin: 21.05rpx 0;
}
.putGoods {
height: 87.72rpx;
border: 1px solid #f5f5f5;
border-radius: 8px;
padding: 12px;
}
.search_goods_btn {
margin-top: 28.07rpx;
display: flex;
justify-content: space-between;
.edit_btn {
color: #fff;
border-radius: 8px;
text-align: center;
line-height: 70.18rpx;
height: 70.18rpx;
width: 210.53rpx;
}
.cancel {
background-color: $u-error;
}
.search {
background-color: $u-primary;
}
}
}
// 扫码编辑商品
.edit_goods_box {
width: 694.74rpx;
padding: 28.07rpx;
font-size: 31.58rpx;
text {
color: '#f8f9f9';
}
.edit_name,
.edit_store {
height: 105.26rpx;
}
.edit_name_no {
color: #a4a4a4;
}
.edit_store {
// border-top: 1px solid #a4a4a4;
margin-top: 21.05rpx;
}
/deep/.u-button {
width: 300rpx;
}
.edit_goods_btn {
margin-top: 28.07rpx;
display: flex;
justify-content: space-between;
.edit_btn {
width: 210.53rpx;
}
}
}
.list-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20rpx 28rpx 0;
.item {
width: 328rpx;
margin-bottom: 20rpx;
overflow: hidden;
position: relative;
border-radius: 8px;
background-color: #fff;
&.on {
border-radius: 0;
}
.pictrue_log {
width: 92rpx;
height: 44rpx;
font-size: 26rpx;
line-height: 44rpx;
}
.pictrue,
/deep/image,
/deep/.easy-loadimage,
/deep/uni-image {
width: 100%;
display: block;
position: relative;
.border-picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: center/cover no-repeat;
}
}
.picture1,
/deep/.picture1 image,
/deep/.picture1 .easy-loadimage,
/deep/.picture1 uni-image {
height: 346rpx;
position: relative;
.border-picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: center/cover no-repeat;
}
.sell_out {
display: flex;
width: 150rpx;
height: 150rpx;
align-items: center;
justify-content: center;
border-radius: 100%;
background: rgba(0, 0, 0, .6);
color: #fff;
font-size: 30rpx;
position: absolute;
top: 50%;
left: 50%;
margin: -75rpx 0 0 -75rpx;
&::before {
content: "";
display: block;
width: 140rpx;
height: 140rpx;
border-radius: 100%;
border: 1px dashed #fff;
position: absolute;
top: 5rpx;
left: 5rpx;
}
}
}
.cont1,
/deep/.cont1 image,
/deep/.cont1 .easy-loadimage,
/deep/.cont1 uni-image,
.cont1 .border-picture {
border-radius: 16rpx;
}
.text-info {
padding: 10rpx 20rpx 15rpx;
display: flex;
flex-direction: column;
.center {
display: flex;
align-items: flex-end;
.tip {
padding: 5rpx 10rpx;
background-color: #f84221;
color: #fff;
font-size: 20rpx;
border-radius: 10rpx;
margin-left: 12rpx;
}
.tip_green {
padding: 5rpx 10rpx;
background-color: #f84221;
color: #fff;
font-size: 20rpx;
border-radius: 10rpx;
margin-left: 12rpx;
}
}
.add-btn {
align-self: flex-end;
text-align: center;
width: 175.44rpx;
color: #fff;
margin-top: auto;
padding: 7.02rpx 21.05rpx;
border-radius: 100px;
background: $uni-theme-bg-color;
}
.title {
font-size: 31.58rpx;
margin-bottom: 10.53rpx;
color: #222222;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.old-price {
margin-top: 4rpx;
font-size: 26rpx;
color: #999;
text-decoration: line-through;
text {
margin-right: 2px;
font-size: 20rpx;
}
}
.price {
display: flex;
margin-top: 20rpx;
font-size: 26rpx;
align-items: center;
text {
font-size: 36rpx;
font-weight: 550;
}
.ot-price {
color: #aaa;
font-size: 26rpx;
text-decoration: line-through;
margin-left: 6rpx;
font-weight: normal;
margin-top: 10rpx;
}
}
}
.pictrue {
position: relative;
}
.border-picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8rpx;
background: center/cover no-repeat;
}
}
.merchant_info {
display: flex;
align-items: center;
margin-top: 20rpx;
.merchant_type {
color: #fff;
line-height: 30rpx;
padding: 0 10rpx;
border-radius: 2rpx;
font-size: 22rpx;
}
.txt {
display: flex;
align-items: center;
justify-content: center;
width: 56rpx;
height: 28rpx;
margin-left: 15rpx;
border: 1px solid $theme-color;
border-radius: 4rpx;
font-size: 20rpx;
font-weight: normal;
&.delivery {
margin-left: 0;
color: #FF9000;
border-color: #FF9000;
}
}
}
&.on {
display: flex;
}
&.listA {
.item {
display: flex;
width: 100%;
.pictrue,
/deep/image,
/deep/.easy-loadimage,
/deep/uni-image {
width: 220rpx;
height: 220rpx;
}
.sell_out {
display: flex;
width: 110rpx;
height: 110rpx;
align-items: center;
justify-content: center;
border-radius: 100%;
background: rgba(0, 0, 0, .6);
color: #fff;
font-size: 24rpx;
position: absolute;
top: 50%;
left: 50%;
margin: -55rpx 0 0 -55rpx;
&::before {
content: "";
display: block;
width: 100rpx;
height: 100rpx;
border-radius: 100%;
border: 1px dashed #fff;
position: absolute;
top: 5rpx;
left: 5rpx;
}
}
.text-info {
width: 490rpx;
}
}
}
&.listB {
justify-content: inherit;
.item {
width: 31.3%;
margin-right: 3.05%;
.pictrue,
/deep/image,
/deep/.easy-loadimage,
/deep/uni-image {
height: 220rpx;
}
.sell_out {
display: flex;
width: 110rpx;
height: 110rpx;
align-items: center;
justify-content: center;
border-radius: 100%;
background: rgba(0, 0, 0, .6);
color: #fff;
font-size: 24rpx;
position: absolute;
top: 50%;
left: 50%;
margin: -55rpx 0 0 -55rpx;
&::before {
content: "";
display: block;
width: 100rpx;
height: 100rpx;
border-radius: 100%;
border: 1px dashed #fff;
position: absolute;
top: 5rpx;
left: 5rpx;
}
}
&:nth-child(3n) {
margin-right: 0;
}
.price {
display: flex;
align-items: center;
justify-content: center;
font-size: 20rpx;
text {
font-size: 28rpx;
}
}
.text-info {
padding: 10rpx 4rpx;
}
}
}
&.listC {
.item {
width: 100%;
.pictrue,
/deep/image,
/deep/.easy-loadimage,
/deep/uni-image {
height: 320rpx;
}
.price {
margin-top: 20rpx;
font-size: 40rpx;
display: flex;
align-items: center;
.old-price {
font-weight: normal;
font-size: 22rpx;
margin-left: 10rpx;
}
}
}
}
&.listS {
.price {
font-size: 40rpx;
display: flex;
align-items: baseline;
.old-price {
font-weight: normal;
font-size: 22rpx;
margin-left: 10rpx;
}
}
}
}
.list-box-put {
padding-bottom: 30rpx;
.item {
width: 694rpx;
margin: 0 auto;
margin-top: 20rpx;
background-color: #fff;
border-radius: 14rpx;
.top {
display: flex;
padding: 22rpx;
.pictrue {
margin-right: 16rpx;
.img {
width: 200rpx;
height: 200rpx;
}
.swiper {
width: 100%;
display: flex;
justify-content: space-between;
image {
width: 60rpx;
height: 60rpx;
}
}
.btn{
font-size: 24rpx;
margin: 0 auto;
margin-top: 10rpx;
width: 120rpx;
height: 40rpx;
background-color: #419aff;
color: #fff;
line-height: 40rpx;
text-align: center;
border-radius: 40rpx;
}
}
.text-info {
flex: 1;
.title {
display: flex;
.text_item_title {
flex-shrink: 0;
margin-right: 10rpx;
}
}
.text {
display: flex;
justify-content: space-between;
font-size: 24rpx;
padding-right: 10rpx;
padding-top: 10rpx;
.text_item {
flex: 1;
display: flex;
.text_item_title {
flex-shrink: 0;
margin-right: 10rpx;
}
.more {
// font-size: 24rpx;
flex: 1;
// height: auto;
}
}
}
}
}
.bottom {
display: flex;
justify-content: space-between;
padding: 16rpx 22rpx;
.add-btn {
background-color: #419aff;
color: #fff;
height: 50rpx;
width: 160rpx;
line-height: 50rpx;
text-align: center;
border-radius: 50rpx;
}
}
}
}
.photo-box{
.card{
width: 694rpx;
margin: 0 auto;
margin-top: 20rpx;
background-color: #fff;
padding: 20rpx;
border-radius: 14rpx;
.card-head{
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.img-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.img{
width: 210rpx;
height: 210rpx;
margin-bottom: 15rpx;
border-radius: 14rpx;
overflow: hidden;
}
}
.img-list2{
justify-content: left;
.img{
margin-right: 16rpx;
}
}
}
}
</style>