特殊商品退货须知

components/cm-module/orderDetails/orderAddress.vue

@@ -29,7 +29,7 @@
 <script>
 	import { mapState, mapMutations } from 'vuex'	
 	export default{
-		name:"address",
+		name:'address',
 		props:{
 			addressData:{
 				type:Object
@@ -41,7 +41,7 @@
 			}
 		},
 		created(){
-			this.initData = this.addressData;
+			this.initData = this.addressData
 		},
 		computed: {
 			...mapState(['isManage'])
@@ -57,6 +57,12 @@
 		width: 100%;
 		height: auto;
 		background: #FFFFFF;
+        
+        &::after{
+            content: "";
+            display: block;
+            clear: both;
+        }
 		// border-top: 1px solid #F8F8F8;
 		image{
 			float: left;

components/uni-transition/createAnimation.js

@@ -0,0 +1,128 @@
+// const defaultOption = {
+// 	duration: 300,
+// 	timingFunction: 'linear',
+// 	delay: 0,
+// 	transformOrigin: '50% 50% 0'
+// }
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation')
+// #endif
+class MPAnimation {
+	constructor(options, _this) {
+		this.options = options
+		this.animation = uni.createAnimation(options)
+		this.currentStepAnimates = {}
+		this.next = 0
+		this.$ = _this
+
+	}
+
+	_nvuePushAnimates(type, args) {
+		let aniObj = this.currentStepAnimates[this.next]
+		let styles = {}
+		if (!aniObj) {
+			styles = {
+				styles: {},
+				config: {}
+			}
+		} else {
+			styles = aniObj
+		}
+		if (animateTypes1.includes(type)) {
+			if (!styles.styles.transform) {
+				styles.styles.transform = ''
+			}
+			let unit = ''
+			if(type === 'rotate'){
+				unit = 'deg'
+			}
+			styles.styles.transform += `${type}(${args+unit}) `
+		} else {
+			styles.styles[type] = `${args}`
+		}
+		this.currentStepAnimates[this.next] = styles
+	}
+	_animateRun(styles = {}, config = {}) {
+		let ref = this.$.$refs['ani'].ref
+		if (!ref) return
+		return new Promise((resolve, reject) => {
+			nvueAnimation.transition(ref, {
+				styles,
+				...config
+			}, res => {
+				resolve()
+			})
+		})
+	}
+
+	_nvueNextAnimate(animates, step = 0, fn) {
+		let obj = animates[step]
+		if (obj) {
+			let {
+				styles,
+				config
+			} = obj
+			this._animateRun(styles, config).then(() => {
+				step += 1
+				this._nvueNextAnimate(animates, step, fn)
+			})
+		} else {
+			this.currentStepAnimates = {}
+			typeof fn === 'function' && fn()
+			this.isEnd = true
+		}
+	}
+
+	step(config = {}) {
+		// #ifndef APP-NVUE
+		this.animation.step(config)
+		// #endif
+		// #ifdef APP-NVUE
+		this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
+		this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
+		this.next++
+		// #endif
+		return this
+	}
+
+	run(fn) {
+		// #ifndef APP-NVUE
+		this.$.animationData = this.animation.export()
+		this.$.timer = setTimeout(() => {
+			typeof fn === 'function' && fn()
+		}, this.$.durationTime)
+		// #endif
+		// #ifdef APP-NVUE
+		this.isEnd = false
+		let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
+		if(!ref) return
+		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
+		this.next = 0
+		// #endif
+	}
+}
+
+
+const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
+	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
+	'translateZ'
+]
+const animateTypes2 = ['opacity', 'backgroundColor']
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
+animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
+	MPAnimation.prototype[type] = function(...args) {
+		// #ifndef APP-NVUE
+		this.animation[type](...args)
+		// #endif
+		// #ifdef APP-NVUE
+		this._nvuePushAnimates(type, args)
+		// #endif
+		return this
+	}
+})
+
+export function createAnimation(option, _this) {
+	if(!_this) return
+	clearTimeout(_this.timer)
+	return new MPAnimation(option, _this)
+}

components/uni-transition/uni-transition.vue

@@ -0,0 +1,277 @@
+<template>
+	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
+</template>
+
+<script>
+import { createAnimation } from './createAnimation'
+
+/**
+ * Transition 过渡动画
+ * @description 简单过渡动画组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间
+ * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+ */
+export default {
+	name: 'uniTransition',
+	emits:['click','change'],
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		modeClass: {
+			type: [Array, String],
+			default() {
+				return 'fade'
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		styles: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		customClass:{
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			opacity: 1,
+			animationData: {},
+			durationTime: 300,
+			config: {}
+		}
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open()
+				} else {
+					// 避免上来就执行 close,导致动画错乱
+					if (this.isShow) {
+						this.close()
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		// 生成样式数据
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			}
+			let transform = ''
+			for (let i in styles) {
+				let line = this.toLine(i)
+				transform += line + ':' + styles[i] + ';'
+			}
+			return transform
+		},
+		// 初始化动画条件
+		transformStyles() {
+			return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
+		}
+	},
+	created() {
+		// 动画默认配置
+		this.config = {
+			duration: this.duration,
+			timingFunction: 'ease',
+			transformOrigin: '50% 50%',
+			delay: 0
+		}
+		this.durationTime = this.duration
+	},
+	methods: {
+		/**
+		 *  ref 触发 初始化动画
+		 */
+		init(obj = {}) {
+			if (obj.duration) {
+				this.durationTime = obj.duration
+			}
+			this.animation = createAnimation(Object.assign(this.config, obj),this)
+		},
+		/**
+		 * 点击组件触发回调
+		 */
+		onClick() {
+			this.$emit('click', {
+				detail: this.isShow
+			})
+		},
+		/**
+		 * ref 触发 动画分组
+		 * @param {Object} obj
+		 */
+		step(obj, config = {}) {
+			if (!this.animation) return
+			for (let i in obj) {
+				try {
+					if(typeof obj[i] === 'object'){
+						this.animation[i](...obj[i])
+					}else{
+						this.animation[i](obj[i])
+					}
+				} catch (e) {
+					console.error(`方法 ${i} 不存在`)
+				}
+			}
+			this.animation.step(config)
+			return this
+		},
+		/**
+		 *  ref 触发 执行动画
+		 */
+		run(fn) {
+			if (!this.animation) return
+			this.animation.run(fn)
+		},
+		// 开始过度动画
+		open() {
+			clearTimeout(this.timer)
+			this.transform = ''
+			this.isShow = true
+			let { opacity, transform } = this.styleInit(false)
+			if (typeof opacity !== 'undefined') {
+				this.opacity = opacity
+			}
+			this.transform = transform
+			// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+			this.$nextTick(() => {
+				// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+				this.timer = setTimeout(() => {
+					this.animation = createAnimation(this.config, this)
+					this.tranfromInit(false).step()
+					this.animation.run()
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				}, 20)
+			})
+		},
+		// 关闭过度动画
+		close(type) {
+			if (!this.animation) return
+			this.tranfromInit(true)
+				.step()
+				.run(() => {
+					this.isShow = false
+					this.animationData = null
+					this.animation = null
+					let { opacity, transform } = this.styleInit(false)
+					this.opacity = opacity || 1
+					this.transform = transform
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				})
+		},
+		// 处理动画开始前的默认样式
+		styleInit(type) {
+			let styles = {
+				transform: ''
+			}
+			let buildStyle = (type, mode) => {
+				if (mode === 'fade') {
+					styles.opacity = this.animationType(type)[mode]
+				} else {
+					styles.transform += this.animationType(type)[mode] + ' '
+				}
+			}
+			if (typeof this.modeClass === 'string') {
+				buildStyle(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildStyle(type, mode)
+				})
+			}
+			return styles
+		},
+		// 处理内置组合动画
+		tranfromInit(type) {
+			let buildTranfrom = (type, mode) => {
+				let aniNum = null
+				if (mode === 'fade') {
+					aniNum = type ? 0 : 1
+				} else {
+					aniNum = type ? '-100%' : '0'
+					if (mode === 'zoom-in') {
+						aniNum = type ? 0.8 : 1
+					}
+					if (mode === 'zoom-out') {
+						aniNum = type ? 1.2 : 1
+					}
+					if (mode === 'slide-right') {
+						aniNum = type ? '100%' : '0'
+					}
+					if (mode === 'slide-bottom') {
+						aniNum = type ? '100%' : '0'
+					}
+				}
+				this.animation[this.animationMode()[mode]](aniNum)
+			}
+			if (typeof this.modeClass === 'string') {
+				buildTranfrom(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildTranfrom(type, mode)
+				})
+			}
+
+			return this.animation
+		},
+		animationType(type) {
+			return {
+				fade: type ? 1 : 0,
+				'slide-top': `translateY(${type ? '0' : '-100%'})`,
+				'slide-right': `translateX(${type ? '0' : '100%'})`,
+				'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+				'slide-left': `translateX(${type ? '0' : '-100%'})`,
+				'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+				'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+			}
+		},
+		// 内置动画类型与实际动画对应字典
+		animationMode() {
+			return {
+				fade: 'opacity',
+				'slide-top': 'translateY',
+				'slide-right': 'translateX',
+				'slide-bottom': 'translateY',
+				'slide-left': 'translateX',
+				'zoom-in': 'scale',
+				'zoom-out': 'scale'
+			}
+		},
+		// 驼峰转中横线
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+		}
+	}
+}
+</script>
+
+<style></style>

pages/goods/components/cm-return-instructions.vue

@@ -0,0 +1,84 @@
+<template>
+    <view class="goods-return-instructions">
+        <view class="section" @click="onShowDetail">
+            <view class="label">特殊商品退货须知</view>
+            <view class="iconfont icon-chakangengduo more"></view>
+        </view>
+        <tui-bottom-popup backgroundColor="#fff" :height="400"  :show="popupShow">
+        	<view class="popup-content">
+        	    <view class="close iconfont icon-iconfontguanbi" @click="close"></view>
+        	    <view class="title">特殊商品退货须知</view>
+                <scroll-view :scroll-y="true" class="content">
+                    <view>
+                        为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
+                    </view>
+                </scroll-view>
+        	</view>
+        </tui-bottom-popup>
+    </view>
+</template>
+
+<script> 
+export default {
+    data(){
+        return {
+            popupShow: false
+        }
+    },
+    methods: {
+        onShowDetail() {
+            this.popupShow = true
+        },
+        close() {
+            this.popupShow = false
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-return-instructions {
+    background-color: #fff;
+    .section {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 28rpx;
+        line-height: 90rpx;
+        color: #666666;
+
+        .iconfont {
+            font-size: 28rpx;
+            color: #666;
+        }
+    }
+}
+
+.popup-content {
+    position: relative;
+    padding: 50rpx;
+    background-color: #fff;
+    border-radius: 16rpx 16rpx 0 0;
+
+    .close {
+        position: absolute;
+        right: 24rpx;
+        top: 24rpx;
+        color: #999;
+        font-size: 32rpx;
+    }
+    .title {
+        text-align: center;
+        font-size: 34rpx;
+        color: #333;
+        font-weight: bold;
+    }
+    .content {
+        line-height: 42rpx;
+        font-size: 26rpx;
+        margin-top: 50rpx;
+        max-height: 200rpx;
+        color: #333333;
+    }
+}
+</style>

pages/goods/product.vue

@@ -187,6 +187,10 @@
 						<text class="title">参数：</text> <text class="name">品牌 分类...</text>
 						<text class="iconfont icon-xiayibu"></text>
 					</view>
+                    <!-- 特殊商品退货须知 -->
+                    <view class="return-instructions">
+                        <cm-return-instructions></cm-return-instructions>
+                    </view>
 					<!-- 配套商品 -->
 					<view
 						class="product-supporting"
@@ -605,6 +609,7 @@ import cmPramsPopup from './components/cm-prams-popup.vue'
 import cmUnitPopup from './components/cm-unit-popup.vue'
 import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
 import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
+import cmReturnInstructions from './components/cm-return-instructions.vue'
 import authorize from '@/common/config/authorize.js'
 import wxLogin from '@/common/config/wxLogin.js'
 import { debounce } from '@/common/config/common.js'
@@ -628,7 +633,8 @@ export default {
 		cmPramsPopup,
 		cmUnitPopup,
 		cmProductModal,
-		cmRossPopup
+		cmRossPopup,
+        cmReturnInstructions
 	},
 	data() {
 		return {
@@ -1451,7 +1457,7 @@ export default {
 		activeTab: debounce(
 			(top, _this) => {
 				const { sectionPropsArr } = _this
-				if (sectionPropsArr.length > 0) {
+				if (sectionPropsArr && sectionPropsArr.length > 0) {
 					sectionPropsArr.forEach((item, index) => {
 						// 当前位置为开始位置， 下个起始位置为结束位置
 						const openInterval = (index === 0 ? 0 : item.scrollTop) - 20 // 自定义偏移
@@ -1994,6 +2000,10 @@ page {
 		}
 	}
 }
+.return-instructions{
+    padding: 0 24rpx;
+    border-bottom: 20rpx solid #f7f7f7;
+}
 .product-parameter {
 	width: 702rpx;
 	height: 90rpx;

pages/user/order/components/cm-return-instructions.vue

@@ -0,0 +1,143 @@
+<template>
+    <view class="goods-return-instructions">
+        <view class="section">
+            <view class="checkbox">
+                <checkbox-group @change="onCheckBoxGroupChange">
+                    <label>
+                        <checkbox value="agreement" v-show="false" />
+                        <view class="iconfont" :class="[isActive ? 'icon-yixuanze' : 'icon-weixuanze']"></view>
+                    </label>
+                </checkbox-group>
+            </view>
+            <view class="label">
+                提交订单前，请先阅读
+                <text @click="popupShow = true">《特殊商品退货须知》</text>
+            </view>
+        </view>
+        <view class="mask" v-if="popupShow"></view>
+        <uni-transition :show="popupShow" ref="ani">
+            <template>
+                <view class="popup-content">
+                    <view class="close iconfont icon-iconfontguanbi" @click="popupShow = false"></view>
+                    <view class="title">特殊商品退货须知</view>
+                    <scroll-view :scroll-y="true" class="content">
+                        <view>
+                            为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
+                        </view>
+                    </scroll-view>
+                    <view class="confirm" @click="popupShow = false">确定</view>
+                </view>
+            </template>
+        </uni-transition>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            popupShow: false,
+            checkedList: []
+        }
+    },
+    computed: {
+        isActive() {
+            return this.checkedList.indexOf('agreement') > -1
+        }
+    },
+    methods: {
+        onShowDetail() {
+            this.popupShow = true
+        },
+        close() {
+            this.popupShow = false
+        },
+        onCheckBoxGroupChange(e) {
+            this.checkedList = e.detail.value
+            this.$emit('change', this.isActive)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-return-instructions {
+    background-color: #fffaf8;
+    .section {
+        display: flex;
+        align-items: center;
+        font-size: 24rpx;
+        height: 64rpx;
+        padding: 0 32rpx;
+        color: #333333;
+        text {
+            color: #1890f9;
+        }
+        .checkbox {
+            margin-right: 16rpx;
+        }
+        .icon-weixuanze {
+            color: #b2b2b2;
+        }
+
+        .icon-yixuanze {
+            color: #e15616;
+        }
+    }
+}
+
+.mask {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 996;
+}
+
+.popup-content {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 580rpx;
+    box-sizing: border-box;
+    padding: 40rpx 50rpx 30rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    z-index: 997;
+
+    .close {
+        position: absolute;
+        right: 24rpx;
+        top: 24rpx;
+        color: #999;
+        font-size: 32rpx;
+    }
+    .title {
+        text-align: center;
+        font-size: 34rpx;
+        color: #333;
+        font-weight: bold;
+    }
+    .content {
+        line-height: 42rpx;
+        font-size: 26rpx;
+        margin-top: 50rpx;
+        max-height: 200rpx;
+        color: #333333;
+    }
+    .confirm {
+        width: 420rpx;
+        height: 84rpx;
+        background: linear-gradient(90deg, #f28f31 0%, #e15616 100%);
+        border-radius: 42rpx;
+        color: #fff;
+        font-size: 30rpx;
+        text-align: center;
+        line-height: 84rpx;
+        margin: 50rpx auto 0;
+    }
+}
+</style>

pages/user/order/create-order.vue

@@ -42,7 +42,7 @@
 								v-if="userMoney!=0"
 								@click.stop="checkedBalabce"
 								:class="[ischecked ?'icon-yixuanze':'icon-weixuanze']"
-						>
+						> 
 						</button>
 					</view>
 				</view>
@@ -54,23 +54,26 @@
 			</view>
 		</view>
 		<!-- 底部 -->
-		<view class="footer" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
-			<view class="footer-le">
-				<view class="footer-count">
-					<text>共{{ totalCount }}件商品</text>
-				</view>
-				<view class="footer-price">
-					<view class="sum" :class="totalDiscountAmount == 0 ? 'none' : ''">
-						总价:<text class="price">￥{{ orderShouldPayFee | NumFormat }}</text>
-					</view>
-					<view class="sum-none" v-if="totalDiscountAmount > 0">
-						<text class="money-reduced">共减<text>￥{{ totalDiscountAmount  | NumFormat}}</text></text>
-					</view>
-				</view>
-			</view>
-			<view class="footer-submit" @click.stop="orderSubmitMit">
-				<view class="btn" :class="isSubLoading ? 'disabled' : ''" >提交订单</view>
-			</view>
+		<view class="footer-wrapper" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
+            <cm-return-instructions></cm-return-instructions>
+            <view class="footer">
+                <view class="footer-le">
+                	<view class="footer-count">
+                		<text>共{{ totalCount }}件商品</text>
+                	</view>
+                	<view class="footer-price">
+                		<view class="sum" :class="totalDiscountAmount == 0 ? 'none' : ''">
+                			总价:<text class="price">￥{{ orderShouldPayFee | NumFormat }}</text>
+                		</view>
+                		<view class="sum-none" v-if="totalDiscountAmount > 0">
+                			<text class="money-reduced">共减<text>￥{{ totalDiscountAmount  | NumFormat}}</text></text>
+                		</view>
+                	</view>
+                </view>
+                <view class="footer-submit" @click.stop="orderSubmitMit">
+                	<view class="btn" :class="isSubLoading ? 'disabled' : ''" >提交订单</view>
+                </view>
+            </view>
 		</view>
 		<!-- 优惠券 -->
 		<view class="coupon-content-model" v-if="isCouponModel">
@@ -127,6 +130,7 @@
 	import coupon from './components/coupon'
 	import exchangeCoupon from './components/exchangeCoupon'
 	import freight from './components/freight'
+    import cmReturnInstructions from './components/cm-return-instructions.vue'
 	import freightAlert from '@/components/cm-module/modelAlert/freightAlert'
 	export default {
 		components:{
@@ -136,7 +140,8 @@
 			coupon,
 			exchangeCoupon,
 			freight,
-			freightAlert
+			freightAlert,
+            cmReturnInstructions
 		},
 		data() {
 			return {
@@ -820,20 +825,22 @@
 			}
 		}
 	}
-	.footer{
+	.footer-wrapper{
 		position: fixed;
 		left: 0;
 		bottom: 0;
-		display: flex;
-		align-items: center;
-		width: 100%;
-		height: 110rpx;
-		line-height: 110rpx;
-		justify-content: space-between;
-		font-size: $font-size-28;
-		background-color: #FFFFFF;
-		z-index: 990;
-		color: $text-color;
+        background-color: #FFFFFF;
+        .footer{
+            display: flex;
+            align-items: center;
+            width: 100%;
+            height: 110rpx;
+            line-height: 110rpx;
+            justify-content: space-between;
+            font-size: $font-size-28;
+            z-index: 990;
+            color: $text-color;
+        }
 		.footer-le{
 			width:570rpx;
 			height:100%;

pages/user/order/order-details.vue

@@ -29,6 +29,10 @@
 				v-if="isRequest && !rechargeGoods"
 				:addressData="addressData"
 			></order-address>
+            <!-- 特殊商品退货须知 -->
+            <view class="return-instructions">
+                为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
+            </view>
 			<!-- 商品 -->
 			<goods-list
 				ref="goods"
@@ -529,6 +533,14 @@ page {
 .details {
 	padding-bottom: 130rpx;
 }
+.return-instructions{
+    font-size: 26rpx;
+    color: #E15616;
+    line-height: 42rpx;
+    padding: 32rpx 50rpx;
+    background-color: #FFFAF8;
+    text-align: justify;
+}
 .btn-hover {
 	background: #ffffff;
 }