hwnc/pagesA/pages/adopt/adopt.vue

<template>
	<view :class="[AppTheme]" id="farm">
		<view v-if="!ifpeon">
			<u-empty margin-top="60" text="您还未进行实名认证" mode="order"></u-empty>
			<view class="goreins bg-primary" @click="gopenre()">点击去实名认证</view>
		</view>
		<view v-if="ifpeon" :class="btnImgOrVideo == 0 ? 'carousel-section bg' : 'carousel-section '">
			<view v-show="btnImgOrVideo == 1">
				<swiper imgMode class="carousel" circular @change="swiperChange">
					<swiper-item v-for="(item, index) in imgArr" :key="index" class="carousel-item">
						<image :src="item" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</swiper>
				<view class="swiper-dots"></view>
			</view>
			<view v-show="btnImgOrVideo == 0">
				<view class="video_blck">
					<yfsVideo ref="yvideo" :src="videoUrl" :autoplay="true"></yfsVideo>
				</view>
			</view>
			<scroll-view style="height: 40px;position: absolute;bottom: 20rpx;" scroll-x="true">
				<view class="farm_btn">
					<view class="border-primary"
						:class="btnImgOrVideo == 1 ? 'baner_btn act bg-primary border-primary' : 'baner_btn'"
						@click="changeImgOrVideo(1)">图片
					</view>
					<view class="border-primary" v-show="videoUrl"
						:class="btnImgOrVideo == 0 ? 'baner_btn act bg-primary ' : 'baner_btn'"
						@click="changeImgOrVideo(0)">视频</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="ifpeon" class="info">
			<view class="info-b">
				<text style="font-size: 29rpx;">￥</text>
				<text style="font-weight: bold;">{{ ly_list.copies_price || 0 }}</text>
			</view>
			<view class="info-t">{{ ly_list.name || 0 }}</view>
		</view>
		<view v-if="ifpeon" class="param">
			<view class="block">
				<view class="chansu">
					<view class="W25">
						<view>
							<u-icon name="tags" :color="primary" size="30"></u-icon>
						</view>
						<view class="mtb20">{{ ly_list.vname || '' }}</view>
						<view>认养品种</view>
					</view>
					<view class="W25">
						<view>
							<u-icon name="list-dot" :color="primary" size="30"></u-icon>
						</view>
						<view class="mtb20">{{ ly_list.num || 0 }}{{ ly_list.unit || '' }}</view>
						<view>剩余数量</view>
					</view>

					<view class="W25">
						<view>
							<u-icon name="clock" :color="primary" size="30"></u-icon>
						</view>
						<view class="mtb20">{{ ly_list.cycle || 0 }}天</view>
						<view>认领周期</view>
					</view>

					<view class="W25">
						<view>
							<u-icon name="car" :color="primary" size="30"></u-icon>
						</view>
						<view class="mtb20">{{ ly_list.bonusway || '' }}</view>
						<view>认养收获</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="ifpeon" class="time detail">
			商品类型：
			<text>&nbsp;{{ ly_list.cate || '' }}</text>
		</view>
		<view v-if="ifpeon" class="time">
			截止时间:
			<text> {{ ly_list.dtime || 0 }}</text>
		</view>
		<view v-if="ifpeon" class="time row-between">
			<text class="_num">购买数量</text>
			<view class="ml12">
				<u-number-box v-model="num" buttonSize="25" @change="valChange" :max="ly_list.num * 1"></u-number-box>
			</view>
		</view>
		<view v-if="ifpeon" class="sel">
			<view>
				<u-checkbox-group size='35rpx' active-color="green" @change="checkboxChange(tarp)">
					<u-checkbox v-model="tarpty" shape="circle" :checked="isChecked"></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- <checkbox-group @change="checkboxChange"  >
				<label>
					<checkbox     :color="primary" value="cb" :checked="isChecked" style="transform:scale(0.7)" />
				</label>
			</checkbox-group> -->
			<text class="text" @click="goContract(ly_list.party, 2)">
				阅读并同意
				<text class="text-primary">《{{ partyinfo != null ? partyinfo.name : '暂无' }}》</text>
			</text>
		</view>
		
		<view class="farm" v-if="ly_list.farm_id">
			<view class="text_area">
				<view class="shop_name">
					<image :src="farm_info.farm_logo" :lazy-load="true" class="shop_thumbnail"></image>
					<view class="right_shop_mess">
						<view class="shop_line">
							<view class="shop_line_p1">{{farm_info.farm_name}}
							</view>
							<view class="right_shop_mess_p2" @click="gostoredetail(farm_info.id)">
								进店逛逛
							</view>
						</view>
						<view class="shop_line_fl">
						</view>
						<view class="shop_line">
							<view class="shop_line_p2">
								<u-icon   name="map" size="20" color="#9C9C9C"></u-icon>
								<view class="address">
									{{farm_info.farm_address}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="shop_one">
				<view class="shop_one_1">
					<view class="view1">{{farm_info.page_view}}</view>
					<view class="view2">访客数</view>
				</view>
				<view>
					<u-line color="#999998" direction="col" length='60%'></u-line>
				</view>
			
				<view class="shop_one_1">
					<view class="view1">{{farm_info.shopnum}}</view>
					<view class="view2">全部商品</view>
				</view>
				<view>
					<u-line color="#999998" direction="col" length='60%'></u-line>
				</view>
			
				<view class="shop_one_1">
			
					<view class="view1">{{farm_info.shoporder}}</view>
			
					<view class="view2">已售出</view>
				</view>
			</view>
			<!-- <view style="padding: 0 0 20rpx 0;">
				<u-album singleSize="75" multipleSize='75' singleMode="aspectFill"
					multipleMode="aspectFill" :urls="farm_info.detail_img" maxCount="4" :showMore='true'
					rowCount="4"></u-album>
			</view> -->
		</view>
		
		<view v-if="ifpeon" class="time detail">详细说明</view>
		<view style="background-color: #ffffff;">
			<u-parse v-if="ifpeon" previewImg :content="content"></u-parse>
		</view>
		<view v-if="ifpeon" class="nav" style="border-bottom:70rpx solid #ffffff;">
			<view class="mt10">
				<ul class="tab-title">
					<li v-for="(title, index) in tabTitle" @click="tab(index)" :key="index"
						class="border-primary text-primary" :class="cur == index? 'bg-linear-gradient active':'' ">
						{{ title }}
					</li>
				</ul>
			</view>
			<view>
				<view class="jl" v-if="cur == 0">
					<view class="flec1" v-for="(item, index) in userlist" :key="index">
						<view class="jl-c">
							<view class="sr" style="width:30rpx;">{{ index + 1 }}</view>
							<image
								:src="!item.headimgurl ? settingFile.siteroot+'/static/app/tab-my.png' : item.headimgurl"
								alt="" class="img"></image>
							<view class="sr-p">&nbsp;&nbsp;{{ !item.nickname ? '暂未昵称' : item.nickname }}</view>
						</view>
						<view class="t">{{ item.ctime }}</view>
					</view>
				</view>
				<view class="jl jl2 " v-if="cur == 1">
					<view class="flec1" v-for="(item, index) in userranklist" :key="index">
						<view class="jl-c">
							<view class="sr" style="width:30rpx;">{{ index + 1 }}</view>
							<image
								:src="!item.headimgurl ? settingFile.siteroot+'/static/app/tab-my.png' : item.headimgurl"
								alt="" class="img"></image>
							<view class="sr-p">&nbsp;&nbsp;{{ !item.nickname ? '暂未昵称' : item.nickname }}</view>
						</view>
						<view class="t">{{ item.paytime }}</view>
					</view>
				</view>
			</view>
			<admyself :opshow="true"></admyself>
		</view>
		<view v-if="ifpeon" class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<u-icon labelSize="12" color="#909399" label="首页" labelPos="bottom" labelColor="#909399" size="25"
					name="home"></u-icon>
			</navigator>
			<view @click="opensharebox" class="p-b-btn" style="position: relative;">
				<u-icon labelSize="12" color="#909399" label="分享" labelPos="bottom" labelColor="#909399" size="25"
					name="share"></u-icon>
			</view>
			<view class="p-b-btn" :class="favorite?'text-primary':''" @click="toFavorite">
				<u-icon labelSize="12" :color="favorite?primary:'#909399'" label="收藏" labelPos="bottom"
					:labelColor="favorite?primary:'#909399'" size="25" name="heart-fill"></u-icon>
			</view>

			<view class="action-btn-group"><button type="primary"
					class=" bg-linear-gradient action-btn no-border buy-now-btn" @click="goOrder">立即认养</button></view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<nologin ref="nologin" v-on:loginback="loginback"></nologin>
		<!-- #endif -->
		<!-- 分享 -->
		<tarpty :list='parttext' :tarptyshow="tarptyshow" @tarptycolse='tarptycolse' :type='2'></tarpty>
		<sharebox ref="sbox" v-if="sharedata" :data="sharedata"></sharebox>
	</view>
</template>

<script>
	import adoptApi from '@/api/home/index.js';
	import favoriteApi from '@/api/mall/index.js';
	import yfsVideo from '@/components/yfs-video/yfs-video.vue';
	import tarpty from '@/components/ui-tarpty/ui-tarpty.vue';
	import nologin from '@/components/nologin/nologin.vue';
 	export default {
		components: {
			nologin,
			yfsVideo,
			tarpty
		},
		data() {
			return {
				primary: this.$theme.primary,
				btnImgOrVideo: 1,
				jumptype: 'video',
				isChecked: false,
				id: 0,
				state: false,
				tabTitle: ['详细购买记录', '本期排行榜'],
				cur: 0, //默认选中第一个tab
				ly_list: '',
				partyinfo: '',
				num: 1,
				userlist: '',
				userranklist: '',
				imgArr: [],
				settingFile: getApp().globalData.siteinfo,
				value: '',
				videoUrl: '',
				favorite: false,
				isc: '',
				content: '',
				ifpeon: true,
				sharedata: null,
				parttext: '',
				tarptyshow: false,
				tarpty: false,
				tarp: 1,
				farm_info:''

			};
		},
		components: {
			yfsVideo,
			tarpty
		},
		onLoad(options) {
			console.log(options,'options')
			this.$bindid.getbindid(options, this.$store);
			if (options) {
				this.isc = options.isc;
				if (options.id) {
					this.id = options.id;
				}
			}
			this.getInitInfo();
			 
		},
		onShareAppMessage(res) {
			let that = this
			let data = {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			};
			return data;
		},
		onShareTimeline(res) {
			let that = this
			return {
				title: that.sharedata.title,
				imageUrl: that.sharedata.imageUrl,
				path: that.sharedata.path
			}
		},
		methods: {
			gostoredetail(farmid) { //跳转店铺详情
			 
				uni.navigateTo({
					url: "/pagesC/pages/merchantdetails/merchantdetails?id=" + farmid
				})
			},
			loginback() {
				//登录回调
			},
			tarptycolse(show) {
				console.log('show.tap', show.tap)
				if (show.tap == 2) {

					this.isChecked = true
					this.tarpty = true
					this.tarp = 2
				}
				console.log(' this.tarpty', this.tarpty)
				this.tarptyshow = show.show
			},
			opensharebox() {
				this.$refs.sbox.opensharebox(this.sharedata);
			},
			//点击轮播图
			swiperChange() {

			},
			gopenre() {
				uni.redirectTo({
					url: '/pagesD/pages/set/renzheng/renzheng'
				});
			},
			changeImgOrVideo(i) {
				if (i == 0 && this.jumptype == 'webview') {
					let url = this.videoUrl;
					let ad_link = encodeURIComponent(JSON.stringify(url));
					uni.navigateTo({
						url: '/pagesE/pages/showhfive/showhfive?url=' + ad_link
					});
				} else {
					this.btnImgOrVideo = i;
					console.log(this.btnImgOrVideo,'this.btnImgOrVideo')
					if (i == 0) {
						console.log(this.videoUrl,'this.videoUrl')
						this.$refs.yvideo.playvideo(this.videoUrl);
					}
				}

			},
			valChange() {},
			toFavorite() {
				this.favorite = !this.favorite;
				favoriteApi
					.goodslike({
						id: this.id,
						status: this.favorite ? 1 : 0,
						goodstype: 4
					})
					.then(res => {
						if (res.status == 200) {
							this.$api.msg(res.msg);
							if (this.isc) {
								let pages = getCurrentPages();
								let prevPage = pages[pages.length - 2]; //获取到A页面
								prevPage.onLoad(); // 执行前一个页面的onLoad方法
							}
						}
					});
			},
			tab(index) {
				this.cur = index;
			},
			// type1 甲方 2，合同
			goContract(id, type) {
				console.log(id,type,'kkkkkk')
				if (!this.parttext) {
					this.$api.msg(`暂无租赁协议，联系客服添加`);
					return;
				} else {
					this.tarptyshow = true
				}
				console.log(this.tarptyshow,'this.tarptyshow')
			},
			checkboxChange(e) {

				if (this.tarp == 1) {
					this.tarp = 2
					this.tarpty = true
				} else {
					this.tarpty = false
					this.tarp = 1
				}
			},
			getInitInfo() {
				let that = this;
				adoptApi
					.details({
						id: that.id
					})
					.then(res => {
						if (res.status == 200) {
							let res1 = res.data.data.content.replace(/<img src="/gi,
								` <img style='width:100%' src="${that.settingFile.root_rich_img}`);
							let res2 = res1.replace(/<source src="/gi,
								` <source style='width:100%' src="${that.settingFile.root_rich_img}`);
							that.content = res2;
							that.sharedata = res.data.sharedata;
							that.sharedata.title = res.data.data.name;
							that.sharedata.path = '/pagesA/pages/adopt/adopt?pid=' + that.$getuid() + '&id=' + that.id;
							that.videoUrl = res.data.data.videoUrl;
							that.jumptype = res.data.data.jumptype;
							that.ly_list = res.data.data;
							that.favorite = res.data.data.islike == 0 ? false : true;
							that.partyinfo = res.data.data.partyinfo;
							that.userlist = res.data.userlist;
							that.userranklist = res.data.userranklist;
							that.imgArr = res.data.data.prc_top;
							that.parttext = res.data.data.partyinfo.content
							that.farm_info=res.data.farm
						} else {
							that.$api.msg(res.msg);
						}
					});
			},
			goOrder() {
				let that = this;
				if (!this.tarpty) {
					this.$api.msg(`请同意认养协议`);
					return;
				}
				// #ifdef MP-WEIXIN
				if (that.$store.state.islogin()) {
					that.order_make()
				} else {
					that.$refs.nologin.open();
				}
				// #endif
				// #ifdef H5 || APP-PLUS
				that.order_make()
				// #endif
			},
			
			
			order_make() {
				adoptApi
					.order_make({
						goodsid: this.id,
						totalnum: this.num
					})
					.then((res) => {
						uni.showToast({
							icon: 'loading',
							title: '生成订单',
							duration: 2000
						});
						if (res.status == 0) {
							this.$api.msg(res.msg);
						}
						if (res.status == 402) {
							this.$api.msg(res.msg);
							this.ifpeon = false;
						}
						if (res.status == 200) {
							this.$api.msg(res.msg);
							setTimeout(function() {
								uni.navigateTo({
									url: `/pagesC/pages/index/farmorder/farmorder?id=${res.data.orderinputd}`
								});
							}, 1000);
						}
					});
			}
		}
	};
</script>

<style lang="scss">
	html,
	body {
		background-color: #eeeeee;
	}

	.goreins {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 600upx;
		height: 80upx;
		font-size: $font-lg;
		color: #fff;
		border-radius: 10upx;
		margin: 25rpx auto 0 auto;

		&.hollow {
			background: #fff;
			color: #303133;
			border: 1px solid #ccc;
		}
	}

	#farm {
		width: 100%;

		.carousel-section {
			position: relative;
			width: 100%;
			height: 600rpx;

			.carousel {
				width: 100%;
				height: 600rpx;

				swiper {
					width: 100%;
					height: 100%;

					.swiper-item {
						width: 100%;
						height: 100%;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.farm_btn {
				position: absolute;
				display: flex;

				.baner_btn {
					width: 150rpx;
					height: 60rpx;
					margin: 0 20rpx;
					color: #ffffff;
					text-align: center;
					line-height: 54rpx;
					border-radius: 30rpx;
					border-width: 1rpx;
					border-style: solid;
				}

				.baner_btn.act {}
			}
		}

		.carousel-section.bg {
			background-color: #000000;

			.video_blck {
				width: 100%;
				height: 419rpx;
			}
		}

		button::after {
			border: none;
		}

		.info {
			padding: 0 20rpx;
			overflow: hidden;
			// width: 100%;
			background-color: #ffffff;
			border-bottom: 1px solid #f2f2f2;
		}

		.info .info-t {
			font-size: 32rpx;
			color: #303133;
			line-height: 50rpx;
			margin-top: 20rpx;
			margin-bottom: 12rpx;
			font-family: PingFang SC;
			// font-weight: bold;
			color: rgba(0, 0, 0, 1);
		}

		.info .info-b {
			margin-top: 25rpx;
			font-size: 40rpx;
			font-family: PingFang SC;
			color: rgba(51, 51, 51, 1);
		}

		.info .info-b text {
			color: #ff1f1f;
		}

		.param {
			width: 100%;
			background-color: #ffffff;
			overflow: hidden;
			padding-bottom: 10rpx;
			border-radius: 0 0 20rpx 20rpx;
		}

		.red {
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			padding-left: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(254, 88, 40, 1);
		}

		.fle {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.fle image {
			position: relative;
			top: 10rpx;
			width: 28rpx;
			height: 28rpx;
			margin-right: 12rpx;
			position: relative;
		}

		.chansu {
			display: flex;
			margin: 0 auto;
			margin-bottom: 14rpx;
			overflow: hidden;

			.W25 {
				margin-top: 30rpx;
				width: 25%;
				text-align: center;

				.wh100 {
					width: 50rpx;
					height: 50rpx;

				}

				.mtb20 {
					margin: 20rpx 0;
					font-size: 26rpx;
					color: #383838;
				}

				view {
					font-size: 22rpx;
					color: #939393;
					justify-content: center;
				}
			}
		}

		.fle image text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
		}

		.time,
		.time2 {
			height: 96rpx;
			padding: 0 20rpx;
			line-height: 96rpx;
			background-color: #ffffff;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			border-bottom: 1px solid #f2f2f2;
		}

		.detail {
			margin-top: 20rpx;
			border-radius: 15rpx 15rpx 0 0;
		}

		.row-between {
			display: flex;

			._num {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.ml12 {
				margin-left: 12rpx;
				justify-content: center;
				display: flex;
			}
		}

		.time text {
			margin-left: 0.5vh;
			color: #666666;
		}

		.time2 {
			height: 96rpx;
			line-height: 96rpx;
			margin-top: 0;
		}

		.time2 .red1 {
			color: #fe5828;
		}

		.sel {
			height: 96rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;
			background-color: #ffffff;
		}

		.sel .ipt {
			height: 40rpx;
			width: 40rpx;
			border-radius: 10rpx;
		}

		.sel .text {
			position: relative;
			top: -2rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.banner2 {
			width: 100%;
		}

		.banner2 image {
			width: 100%;
			height: 100%;
		}

		.nav {
			margin-top: 20rpx;
			min-height: 500rpx;
			background-color: #ffffff;
			overflow: hidden;
		}

		.nav .tab-title {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			height: 80rpx;
			margin-top: 16rpx;
			display: flex;
			justify-content: center;
			font-size: 36rpx;
		}

		.tab-title li {
			width: 50%;
			height: 76rpx;
			text-align: center;
			line-height: 75rpx;
			border-radius: 10rpx 0px 0px 10rpx;
			border-width: 2rpx;
			border-style: solid;
		}

		.tab-title li:nth-child(2) {
			border-radius: 0px 10rpx 10rpx 0px;
		}

		.tab-title .active {
			color: #ffffff;
		}

		.jl {
			width: calc(100% - 40rpx);
			margin: 0 auto;
			// padding-bottom: 20rpx;
			margin-top: 20rpx;
			overflow: hidden;
			background-color: #fff3ee;
			margin-bottom: 50rpx;
			border-radius: 20rpx;
		}

		.jl .flec1 {
			width: calc(100% - 68rpx);
			height: 72rpx;
			margin: 30rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.jl-c {
			display: flex;
			height: 72rpx;
			align-items: center;
		}

		.jl .jl-c .sr {
			margin-right: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.jl .jl-c .sr-p {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			margin-left: 8rpx;
		}

		.jl .jl-c .img {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
		}

		.jl .t {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
		}

		.foot {
			display: flex;
			width: 100%;
			height: 102rpx;
			background-color: #f2f3f5;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
		}

		.left {
			flex: 1;
			display: flex;
		}

		.left view {
			width: 33.33%;
			/*border-right: 1px solid red;*/
			height: 102rpx;
		}

		.imed {
			width: 356rpx;
			height: 102rpx;
			line-height: 102rpx;
			background: rgba(254, 88, 40, 1);
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}

		.line {
			margin: 0 auto;
			width: 48rpx;
			height: 4rpx;

			background: url('../../../static/imgs/farm/reduce.png') no-repeat center;
		}

		.line2 {
			background: url('../../../static/imgs/farm/add.png') no-repeat center;
		}

		.left .two {
			width: 33.33%;
			height: 102rpx;
			text-align: center;
			line-height: 102rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.one,
		.two {
			border-right: 2rpx solid #c5c5c5;
		}

		.page-bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 95;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100upx;
			background: rgba(255, 255, 255, 0.9);
			box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);

			.p-b-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-sm;
				width: 96upx;
				height: 80upx;

				.yticon {
					font-size: 40upx;
					line-height: 48upx;
					color: $font-color-light;
				}

				&.active,
				&.active .yticon {
					color: $tab-color-1;
				}

				.icon-fenxiang2 {
					font-size: 42upx;
					transform: translateY(-2upx);
				}

				.icon-shoucang {
					font-size: 46upx;
				}
			}

			.action-btn-group {
				display: flex;
				height: 76upx;
				border-radius: 100px;
				overflow: hidden;
				box-shadow: 0 20upx 40upx -16upx #fa436a;
				box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
				// background: linear-gradient(to right, #ffac30);

				margin-left: 20upx;
				position: relative;

				.action-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 400rpx;
					height: 100%;
					font-size: $font-base;
					padding: 0;
					border-radius: 0;
				}
			}
		}
	}
	 .text_area {
	 	.shop_name {
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 
	 		.shop_thumbnail {
	 			width: 90rpx;
	 			height: 90rpx;
	 			border-radius: 50%;
	 		}
	 
	 		.right_shop_mess {
	 			width: calc(100% - 90rpx);
	              padding-left: 15rpx;
	 			.shop_line {
	 				display: flex;
	 				justify-content: space-between;
	 				align-items: center;
	 
	 				.shop_line_p1 {
	 					color: #1f1f1f;
	 					font-size: 32rpx;
	 					padding-left: 3rpx;
	 					font-weight: 300;
	 				}
	 
	 				.shop_line_p2 {
	 					width: 100%;
	 					display: flex;
	 					align-items: center;
	 
	 					.address {
	 						color: #333;
	 						font-size: 26rpx;
	 						overflow: hidden;
	 						text-overflow: ellipsis;
	 						white-space: nowrap;
	 					}
	 				}
	 			}
	 
	 			.shop_line_fl {
	 				display: flex;
	 				justify-content: flex-start;
	 				align-items: center;
	 				margin: 5rpx 0;
	 			}
	 
	 			.right_shop_mess_p2 {
	 				border: 1rpx solid #cccccc;
	 				color: #666;
	 				font-size: 24rpx;
	 				padding: 12rpx 20rpx;
	 				border-radius: 40rpx;
	 			}
	 		}
	 	}
	 }
	 
	 .shop_one {
	 	display: flex;
	 	justify-content: space-evenly;
	 	padding: 30rpx 0rpx;
	 
	 	.shop_one_1 {
	 		display: flex;
	 		flex-direction: column;
	 		align-items: center;
	 
	 		.view1 {
	 			font-size: 28rpx;
	 			margin-bottom: 10rpx;
	 
	 		}
	 
	 		.view2 {
	 			font-size: 24rpx;
	 			color: #999999;
	 		}
	 	} 
	 }
	 .farm{
		 background-color: #ffffff;
		 margin-top: 20rpx;
		 padding: 20rpx;
	 }
</style>