cbz/page_shop/pages/good/detail.vue

<template>
	<view class="content">
		<u-navbar title=" " @leftClick="leftClick" height="44px" bgColor="#F5F5F5" :placeholder="true">
			<view class="hflex acenter" slot="center">
				<view class="nav_item" @click="changeNav(1)" :class="nav_active == 1?'nav_active': '' ">商品</view>
				<view class="nav_item" @click="changeNav(2)" :class="nav_active == 2?'nav_active': '' ">详情</view>
			</view>
		</u-navbar>
		<view class="swiper">
			<u-swiper :list="pageData.cover" height="300" @change="e => currentNum = e.current" :autoplay="false" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ len >= 0 ? len : 0}}</text>
				</view>
			</u-swiper>
		</view>
		<view class="box">
			<view class="hflex acenter jbetween">
				<view class="price">￥{{pageData.price_selling}}</view>
				<view class="hflex acenter">
					<view class="vflex acenter" @click="collect">
						<u-icon name="star" color="#444444" size="20" v-if="pageData.is_collection == 0"></u-icon>
						<u-icon name="star-fill" color="#506DFF" size="20" v-else></u-icon>
						<view class="text_style1">收藏</view>	
					</view>	
					<view class="vflex acenter" style="margin-left: 42rpx;"  @click="share('Poster1')">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/share.png" class="bottom_img"></image>	
						<view class="text_style1">分享</view>	
					</view>	
				</view>
			</view>
			<view class="name">{{pageData.name}}</view>
		</view>
		<view class="box">
			<view class="hflex acenter jbetween" @click="openNorm">
				<view class="hflex acenter">
					<view class="label">选择</view>
					<view class="text_style2">{{normStr?normStr:'选择规格'}}</view>
				</view>
				<u-icon name="arrow-right" color="#000" size="14"></u-icon>
			</view>
			<view class="hflex acenter jbetween pad-20" @click="openAddr">
				<view class="hflex acenter">
					<view class="label">配送</view>
					<view class="text_style2">{{delivery?delivery:'选择配送地址'}}</view>
				</view>
				<u-icon name="arrow-right" color="#000" size="14"></u-icon>
			</view>
		</view>
		<view class="box1">
			<view class="title">商品图文详情</view>
			<!-- <block v-for="(item,index) in pageData.detail" :key="index">
				<image :src="item" mode="widthFix" class="detail_img"></image>
			</block> -->
			<u-parse :content="pageData.content"></u-parse>
			<view class="vflex acenter jcenter">
				<view v-for="(item,index) in pageData.slider" :key="index" class="cell">
					<image :src="item.url" style="width: 100%;" mode="aspectFit" v-if="item.type == 'img'"></image>
					<video :src="item.url" v-else></video>
				</view>
			</view>
		</view>
		<view class="bottom hflex acenter jbetween">
			<view class="vflex acenter" @click="toShop">
				<image src="/static/images/shop/shop_icon.png" class="bottom_img"></image>
				<view class="text_style1">店铺</view>	
			</view>	
			<view class="vflex acenter" @click="into_chatroom">
				<image src="/static/images/shop/customer_icon.png" class="bottom_img"></image>	
				<view class="text_style1">客服</view>	
				<!-- <button class="text_style1" style="border: none;background: rgba(0, 0, 0, 0);" open-type="contact" @contact="handleContact">客服</button> -->
			</view>	
			<view class="vflex acenter" @click="toCart">
				<image src="/static/images/shop/cart_icon.png" class="bottom_img"></image>	
				<view class="text_style1">购物车</view>	
			</view>	
			<view class="hflex acenter">
				<view class="btn1" @click="addCart">加入购物车</view>
				<view class="btn2" @click="buy">立即购买</view>
			</view>
		</view>
		<u-popup :show="norm_show" @close="close" mode="bottom" :round="20" :closeable="true">
			<view class="popu">
				<view class="hflex acenter">
					<image :src="pageData.items[norm_active].show_image?pageData.items[norm_active].show_image:pageData.cover" class="popu_img" mode="aspectFill"></image>
					<view class="vflex jbetween popu_right">
						<view class="popu_price">￥{{pageData.items[norm_active].price_selling?pageData.items[norm_active].price_selling:pageData.price_selling}}</view>
						<view class="popu_norm text_hide">{{normStr?normStr:'选择规格'}}</view>
					</view>
				</view>
				<view class="" v-for="(item,index) in pageData.specs" :key="index">
					<view class="popu_title">{{item.name}}</view>
					<view class="hflex acenter fwrap">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<view class="popu_box" @click="selectNorm(index,index2)" :class="item2.select?'sele_active':''" v-if="item2.show && item2.check">{{item2.name}}</view>
							<view class="popu_box popu_box2" v-else @click="selectNorm2">{{item2.name}}</view>
						</block>
					</view>
				</view>
				<view class="hflex acenter jbetween">
					<view class="popu_title">数量</view>
					<u-number-box v-model="pageData.num" @change="changeNum"></u-number-box>
				</view>
				<view class="sure_btn" @click="sure">确定</view>
			</view>
		</u-popup>
		<u-popup :show="addr_show" @close="close" mode="bottom" :round="20" :closeable="true">
			<view class="popu">
				<view class="hflex acenter jcenter popu_title" style="text-align: center;">配送地址</view>
				<view v-if="deliveryList.length > 0">
					<block v-for="(item,index) in deliveryList" :key="index">
						<view class="box_bg hflex acenter" @click="selectAddr(index)">
							<image v-if="item.checked == 1" src="/static/images/shop/checked.png" class="check_img"></image>
							<u-icon v-else name="map-fill" color="#b2b2b2" size="12"></u-icon>
							<view class="popu_right2">
								<view class="hflex acenter">
									<view class="popu_name">{{item.name}}</view>
									<view class="popu_phone">{{item.phone}}</view>
								</view>
								<view class="popu_addr">{{item.province}} {{item.city}} {{item.area}} {{item.address}}</view>
							</view>
						</view>
					</block>
				</view>
				<view class="address vflex acenter jcenter" v-else>
					<image src="/static/images/shop/no_addr.png" class="address_img"></image>
					<view class="address_text">暂无地址</view>
				</view>
				<view class="sure_btn" @click="select">选择其他收货地址</view>
			</view>
		</u-popup>
		<view class="share_content" :class="share_show?'':'share_content1'">
			<view class="share_box vflex">
				<image class="Poster1 cover" :data-enode="pageData.cover[0]" data-etype="image" :src="pageData.cover[0]"></image>
				<view class="Poster1 share_price" :data-enode="'￥' + pageData.price_selling">￥{{pageData.price_selling}}</view>
				<view class="Poster1 share_name text_hide" :data-enode="pageData.name">{{pageData.name}}</view>
				<view class="hflex acenter share_text jcenter Poster1" style=" margin: 0 200rpx 12rpx;" data-enode="长按或扫码查看">长按或扫码查看</view>
				<view style="width: 100%;" class="vflex acenter jcenter">
					<image class="Poster1" style="width: 25rpx;height: 20rpx;" :data-enode="style.img1" data-etype="image" :src="style.img1"></image>
					<image class="Poster1" style="width: 100%;height: 2rpx;margin: 30rpx 0;" :data-enode="style.img2" data-etype="image" :src="style.img2"></image>
				</view>
				<view class="hflex acenter jbetween">
					<view class="vflex">
						<view class="share_name Poster1" style="margin: 54rpx 20rpx 20rpx;" data-enode="船百知">船百知</view>
						<view class="share_text Poster1" style="margin: 0 20rpx 36rpx;" data-enode="船百知伴你一起杨帆启航,驶向成功彼岸">船百知伴你一起杨帆启航,驶向成功彼岸</view>
					</view>
					<image class="Poster1" data-etype="image" :data-enode="style.code" :src="style.code" style="width: 136rpx;height: 136rpx;"></image>
				</view>
			</view>
			<evils-el-poster width="325" height="520" @on-error="onError" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess" ref="Eposter"></evils-el-poster>
			<view class="share_bottom">
				<view class="hflex acenter jcenter">
					<button class="vflex acenter jcenter bottom_item" open-type="share">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/wx.png" class="item_icon"></image>
						<view class="item_text">微信好友</view>
					</button>
					<!-- <button class="vflex acenter jcenter bottom_item" open-type="share">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/moments.png" class="item_icon"></image>
						<view class="item_text">朋友圈</view>
					</button> -->
					<view class="vflex acenter jcenter bottom_item" @click="saveImg">
						<image src="https://ship-expert.zhousi.hdlkeji.com/common/download.png" class="item_icon"></image>
						<view class="item_text">保存图片</view>
					</view>
				</view>
				<view class="share_cancel" @click="closed">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				nav_active: 1,
				currentNum: 0,
				pageData: {
					
				},
				normStr: '',
				norm: '',
				color: '',
				delivery: '',
				deliveryList: [],
				address_active: 0,
				norm_show: false,
				addr_show: false,
				norm_active: -1,
				color_active:-1,
				is_buy: 0,
				id: '',
				order_no: '',
				list: [],
				style: {
					img1: 'https://ship-expert.zhousi.hdlkeji.com/common/down2.png',
					img2: 'https://ship-expert.zhousi.hdlkeji.com/common/line.png',
					code: 'https://ship-expert.zhousi.hdlkeji.com/common/code.jpg'
				},
				share_show: false,
				tempImage:'',
				item_id: '',
				normType: 0,
				len: 0,
				max_num: 1
			}
		},
		onLoad(options) {
			that = this
			that.id = options.id
			that.getData()
			
		},
		onShow() {
			that.getAddr()
		},
		onPageScroll(e) {
			if(e.scrollTop < 530) {
				that.nav_active = 1
			} else {
				that.nav_active = 2
			}
		},
		onShareAppMessage(res) {
			console.log(res);
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		    }
		    return {
		        title: '船百知', //分享的名称
		    }
		},
		onShareTimeline(res) {
			console.log(res);
		    return {
		        title: '船百知',
		        type: 0,
		        summary: "",
		    }
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.Goods/Goods_info',
					data: {
						goods_id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						that.pageData = res.data
						var slider = []
						that.pageData.cover = that.pageData.cover.split('|')
						that.len = that.pageData.cover.length
						for(var i=0;i<that.pageData.slider.length;i++) {
							var temp = that.pageData.slider[i].substr(-3,3)
							var sliders = ''
							if(temp == 'jpg' || temp == "png") {
								sliders = "img"
							} else {
								sliders = 'video'
							}
							console.log(sliders);
							var data = {
								type: sliders,
								url: that.pageData.slider[i]
							}
							slider.push(data)
						}
						that.pageData.slider = slider
						console.log(that.pageData);
						that.$set(that.pageData,'num',1)
					}
				})
			},
			getAddr() {
				$api.req({
					url: '/data/api.User/address_list'
				}, function(res) {
					if(res.code == 1) {
						that.deliveryList = res.data.data
						var address_id = uni.getStorageSync('address_id')
						for(var i=0;i<that.deliveryList.length;i++) {
							if(that.deliveryList[i].id == address_id) {
								that.delivery = that.deliveryList[i].province+that.deliveryList[i].city+that.deliveryList[i].area
								that.$set(that.deliveryList[i],'checked',true)
								that.address_active = i
							} else {
								that.$set(that.deliveryList[i],'checked',false)
							}
						} 
						
					}
				})
			},
			// 返回
			leftClick() {
				$api.jump(-1)
			},
			// 切换导航栏
			changeNav(index) {
				that.nav_active = index
				if(index == 1) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				} else {
					uni.pageScrollTo({
						scrollTop: 530,
						duration: 300
					});
				}
			},
			// 收藏
			collect() {
				if(that.pageData.is_collection == 0) {
					that.pageData.is_collection = 1
					$api.req({
						url: '/data/api.Goods/collection',
						data: {
							goods_id: that.pageData.id,
						}
					}, function(res) {
						if(res.code == 1) {
							$api.info(res.info)
						}
					})
					// $api.info('收藏成功')
				} else {
					that.pageData.is_collection = 0
					$api.req({
						url: '/data/api.Goods/cancel_collection',
						data: {
							goods_id: that.pageData.id,
						}
					}, function(res) {
						if(res.code == 1) {
							$api.info(res.info)
						}
					})
				}
			},
			share(elClass) {
				let view = uni.createSelectorQuery().in(this).select(".Poster1");
				
				view.fields({
				  size: true,
				  rect: true,
				  scrollOffset: true
				}, data => {
				}).exec();
				that.share_show = true
				that.$refs.Eposter.createForElRect(elClass,false)
			},
			// 打开规格
			openNorm() {
				that.norm_show = true
				that.normType = 1
			},
			// 打开配送
			openAddr() {
				that.addr_show = true
			},
			// 选择规格
			selectNorm(index,index2) {
				for(var i=0;i<that.pageData.specs[index].list.length;i++) {
					if(i == index2) {
						that.$set(that.pageData.specs[index].list[i],'select',true)
					} else {
						that.$set(that.pageData.specs[index].list[i],'select',false)
					}
				}
				that.normStr = ''
				that.item_id = ''
				for(var i=0;i<that.pageData.specs.length;i++) {
					for(var j=0;j<that.pageData.specs[i].list.length;j++) {
						if(that.pageData.specs[i].list[j].select) {
							that.normStr += that.pageData.specs[i].name+'::'+that.pageData.specs[i].list[j].name+';;'
							// that.item_id += 
						}
					}
				}
				that.normStr = that.normStr.substring(0, that.normStr.length-2)
				for(var i=0;i<that.pageData.items.length;i++) {
					if(that.pageData.items[i].goods_spec == that.normStr) {
						that.norm_active = i
						that.max_num = that.pageData.items[that.norm_active].stock_total
						that.normStr = $api.resetspec(that.normStr)
						return
					} else {
						that.norm_active = -1
					}
				}
				that.normStr = $api.resetspec(that.normStr)
				// that.norm_active = index2
				// that.normStr = that.pageData.items[index].goods_spec
				// that.normStr = that.norm + ' ' + that.color + ' ' + 'X' + that.pageData.norm.num
			},
			selectNorm2() {
				$api.info('该规格已下架，请重新选择')
			},
			// 选择颜色
			selectColor(index) {
				that.color_active = index
				that.color = that.pageData.norm.colorList[index].name
				that.normStr = that.norm + ' ' + that.color + ' ' + 'X' + that.pageData.norm.num
			},
			// 选择数量
			changeNum(e) {
				that.pageData.num = e.value
				
			},
			// 选择地址
			selectAddr(index) {
				for(var i=0;i<that.deliveryList.length;i++) {
					if(i == index) {
						console.log(i);
						that.$set(that.deliveryList[i],'checked',1)
						that.address_active = i
						that.delivery = that.deliveryList[i].province+that.deliveryList[i].city+that.deliveryList[i].area + that.deliveryList[i].address
						that.close()
					} else {
						that.$set(that.deliveryList[i],'checked',0)
					}
				}
			},
			// 加入购物车
			addCart() {
				if(that.max_num < that.pageData.num) {
					$api.info("商品库存不足")
					return
				}
				if(that.norm == '' && that.color == '') {
					that.is_buy = 0
					that.norm_show = true
					// that.openNorm()
				} else {
					$api.req({
						url: '/data/api.Goods/cart_add',
						method: 'POST',
						data: {
							admin_id: that.pageData.admin_id,
							goods_id: that.pageData.id,
							item_id: that.pageData.items[that.norm_active].id,
							num: that.pageData.num
						}
					}, function(res) {
						if(res.code == 1) {
							$api.info('加入购物车成功')
							that.close()
						}
					})
					
				}
			},
			// 立即购买
			buy() {
				/* if(that.deliveryList.length == 0) {
					$api.info('请先选择配送地址')
					return
				} */
				if(that.max_num < that.pageData.num) {
					$api.info("商品库存不足")
					return
				}
				console.log(that.norm_active);
				if(that.norm_active == -1) {
					that.is_buy = 1
					that.norm_show = true
				} else {
					var url = ''
					var data = {
						admin_id: that.pageData.admin_id,
						admin_name: that.pageData.admin_name,
						code: that.pageData.code,
						create_at: that.pageData.create_at,
						cover: that.pageData.cover,
						id: that.pageData.id,
						items: that.pageData.items,
						name: that.pageData.name,
						num_read: that.pageData.num_read,
						price_selling: that.pageData.price_selling,
						price_market: that.pageData.price_market,
					}
					if(that.deliveryList.length>0) {
						url = '/page_shop/pages/good/submit?pageData=' + JSON.stringify(data) + '&item_id=' + that.norm_active + '&buy_num=' + that.pageData.num + '&address_id=' + that.deliveryList[that.address_active].id
					} else {
						url = '/page_shop/pages/good/submit?pageData=' + JSON.stringify(data) + '&item_id=' + that.norm_active + '&buy_num=' + that.pageData.num
					}
					$api.jump(url)
					/* $api.req({
						url: '/data/api.Order/order_create',
						method: 'POST',
						data: {
							admin_id: that.pageData.admin_id,
							item_id: that.pageData.items[that.norm_active].id,
							num: that.pageData.num,
							address_id: that.deliveryList[that.address_active].id
						}
					}, function(res) {
						if(res.code == 1) {
							$api.info(res.info)
							that.close()
							var order_id = res.data.order_id
							var pay_no = res.data.pay_no
							$api.jump('/page_shop/pages/good/submit?order_id=' + order_id + '&address_id=' + that.deliveryList[that.address_active].id + '&pay_no=' +pay_no)
						}
					}) */
				}
			},
			// 确定选择规格
			sure() {
				if(that.max_num < that.pageData.num) {
					$api.info("商品库存不足")
					return
				}
				for(var i=0;i<that.pageData.specs.length;i++) {
					for(var j=0;j<that.pageData.specs[i].list.length;j++) {
						if(!that.pageData.specs[i].list[j].select && that.norm_active == -1) {
							$api.info('该规格已下架，请重新选择')
							return
						}
					}
				}
				
				console.log(that.norm_active);
				if(that.norm_active == -1) {
					$api.info('请选择规格')
					return
				}
				
				if(that.normType == 1) {
					that.close()
					return
				}
				if(that.is_buy == 0) {
					$api.req({
						url: '/data/api.Goods/cart_add',
						method: 'POST',
						data: {
							admin_id: that.pageData.admin_id,
							goods_id: that.pageData.id,
							item_id: that.pageData.items[that.norm_active].id,
							num: that.pageData.num
						}
					}, function(res) {
						if(res.code == 1) {
							$api.info('加入购物车成功')
							that.norm_active = -1
							that.close()
						}
					})
				} else {
					var url = ''
					var data = {
						admin_id: that.pageData.admin_id,
						admin_name: that.pageData.admin_name,
						code: that.pageData.code,
						create_at: that.pageData.create_at,
						cover: that.pageData.cover,
						id: that.pageData.id,
						items: that.pageData.items,
						name: that.pageData.name,
						num_read: that.pageData.num_read,
						price_selling: that.pageData.price_selling,
						price_market: that.pageData.price_market,
					}
					if(that.deliveryList.length>0) {
						url = '/page_shop/pages/good/submit?pageData=' + JSON.stringify(data) + '&item_id=' + that.norm_active + '&buy_num=' + that.pageData.num + '&address_id=' + that.deliveryList[that.address_active].id
					} else {
						url = '/page_shop/pages/good/submit?pageData=' + JSON.stringify(data) + '&item_id=' + that.norm_active + '&buy_num=' + that.pageData.num
					}
					
					$api.jump(url)
					that.close()
					/* if(that.deliveryList.length == 0) {
						$api.info('请先选择配送地址')
						return
					}
					$api.req({
						url: '/data/api.Order/order_create',
						method: 'POST',
						data: {
							admin_id: that.pageData.admin_id,
							item_id: that.pageData.items[that.norm_active].id,
							num: that.pageData.num,
							address_id: that.deliveryList[that.address_active].id
						}
					}, function(res) {
						if(res.code == 1) {
							$api.info(res.info)
							that.close()
							var order_id = res.data.order_id
							var pay_no = res.data.pay_no
							$api.jump('/page_shop/pages/good/submit?order_id=' + order_id + '&address_id=' + that.deliveryList[that.address_active].id + '&pay_no= ' +pay_no)
						}
					}) */
					
				}
			},
			// 关闭弹窗
			close() {
				that.norm_show = false
				that.addr_show = false
				that.normType = 0
			},
			closed() {
				that.share_show = false
			},
			// 选择其他收货地址
			select() {
				$api.jump('/page_shop/pages/address/list?select=true')
			},
			// 店铺
			toShop() {
				$api.jump('/page_shop/pages/good/shop?id=' + that.pageData.admin_id)
			},
			into_chatroom() {
				var my = uni.getStorageSync("myUsername");
				var nameList = {
				  myName: my,
				  your: that.pageData.huanxinID,
				};
				uni.navigateTo({
				  url: "/pages/chatroom/chatroom?username=" + JSON.stringify(nameList),
				});
			},
			// 购物车
			toCart() {
				$api.jump('/page_shop/pages/mine/cart')
			},
			onSuccess(e) {
				console.log(e);
				that.tempImage = e
			},
			onError(err) {
				console.log('发生错误');
				console.log(err);
			},
			saveImg() {
				console.log(that.tempImage);
				uni.authorize({
				    scope: 'scope.writePhotosAlbum',
				    success() {
				        uni.saveImageToPhotosAlbum({
				        	filePath: that.tempImage,
				        	success: function () {
				        		console.log('save success');
								$api.info('保存成功')
								that.close()
				        	}
				        });
				    }
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F5F5F5;
		.nav_item {
			font-size: 32rpx;
			font-weight: 500;
			color: #999999;
			line-height: 50rpx;
			margin-right: 88rpx;
		}
		.nav_active {
			color: #222222;
			position: relative;
		}
		.nav_active::after {
			content: "";
			position: absolute;
			bottom: -8rpx;
			left: 11rpx;
			width: 40rpx;
			height: 8rpx;
			background: #506DFF;
			border-radius: 6rpx;
		}
		.swiper {
			width: 690rpx;
			margin: 0 auto 10rpx;
			.indicator {
				@include flex(row);
				justify-content: center;
		
			}
		
			.indicator-num {
				padding: 4rpx 0;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 20rpx;
				width: 72rpx;
				@include flex;
				justify-content: center;
		
				&__text {
					 color: #FFFFFF;
					 font-size: 24rpx;
					 font-weight: 400;
					 line-height: 30rpx;
				 }
			}	
		}
		.box {
			margin: 10rpx auto;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 26rpx 20rpx;
			
			.price {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF5959;
				line-height: 38rpx;
			}
			.name {
				margin-top: 20rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
			}
			.bottom_img {
				width: 40rpx;
				height: 40rpx;
			}
			.pad-20 {
				padding: 40rpx 0 0;
			} 
			.label {
				font-size: 26rpx;
				font-weight: 400;
				color: #979797;
				line-height: 36rpx;
				padding-right: 32rpx;
			}
			.text_style2 {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}
			
		}
		.box1 {
			width: 690rpx;
			background: #FFFFFF;			border-radius: 16rpx;
			margin: 10rpx auto 186rpx;
			box-sizing: border-box;
			padding: 26rpx 20rpx;
			.title {
				font-size: 30rpx;
				font-weight: 400;
				color: #222222;
				line-height: 42rpx;
				width: 100%;
				text-align: center;
				padding: 30rpx 0;
			}
			.cell {
				width: 100%;
				margin-top: 20rpx;
			}
			.detail_img {
				width: 100%;
				padding-bottom: 20rpx;
			}
		}
		.text_style1 {
			font-size: 20rpx;
			font-weight: 400;
			color: #444444;
			margin-top: 6rpx;
		}
		button {
			line-height: unset;
		}
		button::after {
			border: none;
		}
		.bottom {
			width: 100%;
			// z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 30rpx 74rpx;
			
			.btn1 {
				width: 220rpx;
				height: 72rpx;
				background: #FFCA43;
				border-radius: 38rpx 0px 0px 38rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
			.btn2 {
				width: 220rpx;
				height: 72rpx;
				background: #506DFF;
				border-radius: 0px 38rpx 38rpx 0px;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
			.bottom_img {
				width: 40rpx;
				height: 40rpx;
			}
			
		}
		.popu {
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 48rpx 30rpx;
			.popu_img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
			}
			
			.popu_right {
				height: 124rpx;
				margin: 20rpx 0 16rpx;
				.popu_price {
					font-size: 28rpx;
					font-weight: 400;
					color: #FF4747;
					line-height: 34rpx;
				}
				.popu_norm {
					max-width: 450rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #A7A7A7;
					line-height: 34rpx;
				}
			}
			.popu_title {
				font-size: 28rpx;
				font-weight: 600;
				color: #222222;
				line-height: 40rpx;
				margin: 15rpx 0;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 2;
			}
			.address {
				.address_img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}
				.address_text {
					text-align: center;
					font-size: 28rpx;
					color: #222222;
					line-height: 40rpx;
				}
			}
			.box_bg {
				background: #F5F5F5;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 24rpx 20rpx;
				margin: 10rpx 0;
				.check_img {
					width: 24rpx;
					height: 24rpx;
				}
				.popu_right2 {
					padding-left: 30rpx;
					
					.popu_name {
						font-size: 28rpx;
						font-weight: 500;
						color: #222222;
						line-height: 40rpx;
					}
					.popu_phone {
						padding-left: 16rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 16px;
					}
					.popu_addr {
						padding: 16rpx 0 0;
						font-size: 24rpx;
						font-weight: 400;
						color: #444444;
						line-height: 34rpx;
					}
				}
			}
			
			.popu_box {
				background: #F4F4F4;
				border-radius: 8rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				line-height: 36rpx;
				padding: 7rpx 36rpx;
				margin: 0 22rpx 28rpx 0;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 2;
			}
			.popu_box2 {
				background-color: #5b5b5b;
			}
			// .popu_box:nth-child(4n+4) {
			// 	margin: 0 0 28rpx 0;
			// }
			.sele_active {
				background: #F1F4FF;
				border: 1px solid #5471FF;
				color: #506DFF;
			}
			.sure_btn {
				width: 100%;
				height: 84rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				margin-top: 94rpx;
			}
			
		}
		.share_content {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100vw;
			height: 100vh;
			background: rgba(0,0,0,0.5);
			backdrop-filter: blur(5px);
			padding: 0 0 0;
			.cover {
				width: 100%;
				margin: 0 auto;
				height: 520rpx;
				// opacity:0
			}
			.share_price {
				font-size: 28rpx;
				font-weight: 400;
				color: #FF5959;
				line-height: 34rpx;
				margin: 6rpx 20rpx 12rpx;
			}
			.share_box {
				// margin: 130rpx auto 0;
				// width: 650rpx;
				// background: #FFFFFF;
				// border-radius: 20rpx;
				// box-sizing: border-box;
				// z-index: -999;
				// // opacity: 0;
				// padding: 0 40rpx;
				margin: 130rpx auto 0;
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 48rpx 35rpx 0;
				
				.share_name {
					max-width: 500rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
					margin: 0 20rpx 44rpx;
				}
				.share_label {
					width: 100%;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
				.share_text {
					width: 100%;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					box-orient: vertical;
					line-clamp: 5;
					-webkit-line-clamp: 5;
				}
				.box_bottom {
					width: 100%;
					padding: 34rpx 0 16rpx;
					border-top: 1rpx dashed #C3C3C3;
					
					.bottom_left1 {
						font-size: 32rpx;
						font-weight: 500;
						color: #222222;
						line-height: 44rpx;
						padding-bottom: 20rpx;
						
					}
					.bottom_left2 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 32rpx;
					}
					.bottom_right {
						width: 136rpx;
						height: 136rpx;
					}
				}
			}
			/* .canvas2 {
				position: absolute;
				top: 188rpx;
				left: 50rpx;
				width: 650rpx;
				min-height: 494rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				// z-index: 9;
			} */
			.share_bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 388rpx;
				background: #F5F7FF;
				border-radius: 40rpx 40rpx 0px 0px;
				z-index: 99;
				.bottom_item {
					width: 33%;
					margin: 50rpx 0 90rpx;
					border: none !important;
					background-color: #F5F7FF !important;
					
					
					.item_icon {
						width: 76rpx;
						height: 76rpx;
					}
					.item_text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
						margin-top: 12rpx;
					}
				}
				button::after {
					border: none !important;
				}
				.share_cancel {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}
		.share_content1 {
			z-index: -99 !important;
		}
	}
</style>